1、class 和 id 的使用場景?

• id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調(diào)用，其優(yōu)先級高于類選擇器，一個標(biāo)簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標(biāo)簽上；
• class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調(diào)用，一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上，多用于多個標(biāo)簽樣式相似或完全相同時；

2、CSS選擇器常見的有幾種?

基礎(chǔ)選擇器

• *:通用元素選擇器，匹配頁面所有元素；
• #id:id選擇器，匹配特定id的元素；
• .class：類選擇器，匹配class包含（不是等于）特定類的元素；
• element ：標(biāo)簽選擇器，匹配相同的標(biāo)簽。

組合選擇器

• E,F: 多元素選擇器，用,分隔，同時匹配元素E和元素F；
• E F :后代選擇器，用空格分隔，匹配E元素所有的后代元素F；
• E>F :子元素選擇器，用>分隔，匹配E元素的所有直接子元素F；
• E+F:直接相鄰選擇器，匹配E元素之后相鄰的同級元素F；
• E~F :普通相鄰選擇器，匹配E元素之后所有的同級元素F（無論直接相鄰與否）；
• .class1.class2 :匹配同時有class1和class2的元素，class1和class2直接沒有分隔；
• element#id :匹配具有id的element元素；

屬性選擇器

• E[attr] :匹配所有具有屬性attr的E元素，div[id]就能取到所有有id屬性的div元素；
• E[attr=value] :匹配所有attr屬性為value的元素；
• E[attr ~=value] :匹配所有屬性attr具有多個空格分隔，其中一個值為value的元素；
• E[attr ^=value] :匹配屬性attr的值以value開頭的元素；
• E[attr $=value] :匹配屬性attr的值以value結(jié)尾的元素；
• E[attr *=value] :匹配屬性attr的值包含value的元素；

偽類選擇器

• E:first-child :匹配元素E的第一個子元素；
• E:link :匹配所有未被點擊的鏈接；
• E:visited :匹配所有已被點擊的鏈接；
• E:active :匹配鼠標(biāo)已經(jīng)點下，還沒釋放的鏈接；
• E:hover :匹配鼠標(biāo)懸停在上面的E元素；
• E:focus :匹配獲得當(dāng)前焦點的E元素；
• E:lang(c) :匹配lang屬性等于c的E元素
• E:enabled :匹配表單中可用的元素；
• E:disabled :匹配表單中禁用的元素；
• E:checked :匹配表單中被選中的radio或checkbox元素；
• E::selection :匹配用戶當(dāng)前選中的元素；
• E:nth-child(n) :匹配E元素的父元素的第n個子元素，從1開始計數(shù)，若該元素不是E元素，則不選擇；
• E:nth-last-child(n) :匹配E元素的父元素倒數(shù)第n個子元素，從1開始計數(shù)，若該元素不是E元素，則不選擇；
• E:nth-of-type(n) :匹配E元素的父元素的第n個E子元素，從1開始計數(shù)，且只計算E元素；
• E:nth-last-of-type(n) :匹配E元素的父元素倒數(shù)的第n個E子元素，從1開始計數(shù)，且只計算E元素；
• E:first-child :匹配E元素的父元素的第一個元素，若該元素不是E元素，則不選擇，等同于E:nth-child(1)；
• E:last-child :匹配E元素的父元素倒數(shù)的第一個元素，若該元素不是E元素，則不選擇，等同于E:nth-last-child(1)；
• E:first-of-type :等同于E:nth-of-type(1)
• E:last-of-type :E:nth-last-of-type(1)
• E:only-child :匹配其父元素下僅有E這一個元素的E元素；
• E:only-of-type :匹配其父元素下僅有E這一個元素的標(biāo)簽的E元素；
• E::first-line :匹配E元素內(nèi)容的第一行；
• E::first-letter :匹配E元素內(nèi)容的第一個字母；
• E::before :在E元素之前插入生成的內(nèi)容；
• E::after 在E元素之后插入生成的內(nèi)容；

3、選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？

1、在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3、id選擇器
4、類選擇器
5、偽類選擇器
6、屬性選擇器
7、標(biāo)簽選擇器
8、通配符選擇器
9、瀏覽器自定義
復(fù)雜場景優(yōu)先級計算：通過比較標(biāo)簽數(shù)，先比較最高優(yōu)先級的標(biāo)簽數(shù)，數(shù)量多的優(yōu)先級高，若最高優(yōu)先級的標(biāo)簽數(shù)相同，比較次一級的標(biāo)簽數(shù)，以此類推。

4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

a:link
a:visited
a:hover
a:active

因為a:visited在點擊過鏈接一次后便永久生效會覆蓋之前的a標(biāo)簽偽類css，而我們依然需要a:hover和a:active的效果，所以a:visited要放在a:link后，a:hover、a:active前。
從觸發(fā)動作上看，a:active效果觸發(fā)時依然在觸發(fā)a:hover效果，所以a:hover要寫在a:active前，否則a:hover會覆蓋a:active。

5、以下選擇器分別是什么意思?

#header{}
/*選擇id為header的元素*/
.header{}
/*選擇class為header的元素*/
.header .logo{}
/*選擇class為header的元素中，class為logo的后代元素*/
.header.mobile{}
/*選擇class包含header和mobile的元素*/
.header p, .header h3{}
/*選擇class為header的元素中后代p元素和h3元素*/
#header .nav>li{}
/*選擇id為header的元素中，class為nav的元素的后代li元素*/
#header a:hover{}
/*選擇id為header的元素中，后代a元素的hover狀態(tài)*/
#header .logo~p{}
/*選擇id為header的元素中，ID名為header的所有后代中與class名為logo同級的兄弟選擇器p*/
#header input[type="text"]{}
/*選擇id為header的元素中，input標(biāo)簽中type屬性為text的元素*/ ```

6.列出你知道的偽類選擇器

E:link
E:visited
E:active
E:hover
E:focus
E:enabled
E:disabled
E::selection
E:first-child
E:last-child
E:nth-child(n)
E:nth-of-type(n)
E:first-of-type
E:last-of-type

7.div:first-child和div:first-of-type的作用和區(qū)別

div:first-child:匹配div的父元素的第一個子元素，且這個元素為div元素
div:first-of-type :匹配div的父元素下同種標(biāo)簽的第一個子元素，且這個元素為div元素

區(qū)別在后者還分是不是在同種標(biāo)簽下

8.運行如下代碼，解析下輸出樣式的原因。

<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div> ```
.item1:first-child選擇.item1的父元素即.ct的第一個子元素，是其自身。所以aa字體變紅。

.item1:first-of-type選擇.item1的父元素即.ct的擁有相同標(biāo)簽的第一個子元素。所以aa和bb背景色變藍。