• class和id的使用場景？

class為一類的元素命名，所有有共同特性的元素都可以用同一class進(jìn)行分類；
id為特有的元素命名，在html中只能有唯一一個(gè)id，不能重復(fù)。

• css選擇器常見的有幾種?列出一些你所知道的偽類選擇器。

1.基礎(chǔ)選擇器
* 通用元素選擇器，匹配頁面任何元素；
#id id選擇器，匹配特定id的元素；
.class 類選擇器，匹配class包含特定類的元素;
element 標(biāo)簽選擇器。

2.組合選擇器
A,B多元素選擇器，用,分隔，同時(shí)匹配元素A或元素B；
A B后代選擇器，用空格分隔，匹配A元素所有的后代（不只是子元素，子元素向下遞歸）元素B；
A>B 子代選擇器，用>分隔，匹配A元素的所有直接子元素B；
A+B 相鄰選擇器，用+分隔，匹配A元素之后的相鄰的同級元素B；
A~B 普通相鄰選擇器，匹配A元素之后的同級元素B（無論直接相鄰與否）；
.class1.class2 匹配同時(shí)擁有.class1.class2兩類的元素；
element#id 匹配擁有某id的某元素，例子：h#important，匹配擁有important這個(gè)id的h元素。

3.屬性選擇器
A[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div；
A[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div；
A[attr ~= value] 匹配所有具有屬性attr且其中一個(gè)attr屬性值等于value的元素；
A[attr ^= value] 匹配屬性attr的值以value開頭的元素；
A[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素；
A[attr *= value] 匹配屬性attr的值包含value的元素。

4.偽類選擇器
A:first-child 匹配作為長子（第一個(gè)子女）的元素E；
A:link 匹配所有未被點(diǎn)擊的鏈接；
A:visited 匹配所有已被點(diǎn)擊的鏈接；
A:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素；
A:hover 匹配鼠標(biāo)懸停其上的E元素；
A:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素；
A:lang(c) 匹配lang屬性等于c的E元素；
A:enabled 匹配表單中可用的元素；
A:disabled 匹配表單中禁用的元素；
A:checked 匹配表單中被選中的radio或checkbox元素；
A::selection 匹配用戶當(dāng)前選中的元素；
A:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素；
A:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號為1；
A:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號為1；
A:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素；
A:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素；
A:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)；
A:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)；
A:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)；
A:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1) :nth-last-child(1)；
A:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1) :nth-last-of-type(1)；
A:empty 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素；
A:not(selector) 匹配不符合當(dāng)前選擇器的任何元素。

5.偽元素選擇器
A::first-line 匹配E元素內(nèi)容的第一行；
A:first-letter 匹配E元素內(nèi)容的第一個(gè)字母；
A::before 在E元素之前插入生成的內(nèi)容；
A::after 在E元素之后插入生成的內(nèi)容。

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

選擇器遵循如下優(yōu)先級（從高到低）：
1.在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義

對于復(fù)雜場景，有如下規(guī)則：
對于不一樣的選擇器，有不一樣的權(quán)重，假設(shè)：
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器、偽元素 ==> d
例子（都指向同一元素）：
A：#test p.class1 {...}a=0，b=1，c=1,d=1
B：#test .class1.class2 {...}a=0，b=1，c=2，d=0
對abcd項(xiàng)進(jìn)行比較，數(shù)量多的優(yōu)先級高，數(shù)量相同則比較下一項(xiàng)，可知B的優(yōu)先級要高于A。

對于下面的重復(fù)樣式，

div {color: #333;}
....
div {color: #666;}

則新的樣式會(huì)覆蓋舊的樣式，div {color: #666;}會(huì)生效。

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

順序如下：

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

基于樣式覆蓋：當(dāng)鏈接沒有任何操作時(shí)，a:link生效；當(dāng)鼠標(biāo)放在鏈接上時(shí)，a:hover生效，覆蓋a:link；當(dāng)點(diǎn)擊鏈接時(shí)，a:active生效，覆蓋a:hover和a:link；鏈接被訪問以后，a:visited永久生效，覆蓋a:link，同時(shí)a:hover，a:active也有效。這是唯一順序。

• 一些選擇器的含義

• div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別（注意空格）

div:first-child 匹配div的父元素下的第一個(gè)元素
div:first-of-type 匹配div的父元素下同種類型的第一個(gè)元素
div :first-child匹配div下的第一個(gè)元素
div :first-of-type匹配div下的同種類型的第一個(gè)元素

• 解析下列代碼輸出樣式的原因

<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{
  color: red;
}

A:nth-child(n)匹配其父元素的第n個(gè)子元素。item1的父元素是ct，ct的第一個(gè)元素就是aa，所以aa字體變?yōu)榱思t色；

.item1:first-of-type{
  background: blue;
}

A:nth-of-type(n)與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素；item的父元素是ct，ct下有兩種類型的元素，p和h3，p的第一個(gè)元素是aa，h3的第一個(gè)元素是bb，所以aa和bb的背景變?yōu)榱怂{(lán)色。