class 和 id 的使用場景?
class 重在樣式的復(fù)用，重普遍性。
id重在劃分樣式區(qū)域，可以作為樣式表中的命名空間來管理樣式。
id也可以指定某一個特殊元素的樣式，重特殊性。
注意：在html中聲明多個一樣的ID的元素，在css中該ID的樣式，這些元素則都會生效。而在javascript中用DOM選擇器只會選到第一個元素。
CSS選擇器常見的有幾種?
1.基礎(chǔ)選擇器
通用元素選擇器
id選擇器
類選擇器
標(biāo)簽選擇器
2.組合選擇器
E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
E F 后代選擇器，用空格分隔，匹配E元素所有的后代元素F
E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
3.屬性選擇器
E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
4.偽類選擇器:
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:focus 匹配獲得當(dāng)前焦點的E元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
5.偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
css樣式的簡單權(quán)重級別由高到低排列：
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id 選擇器
類選擇器、偽類選擇器、屬性選擇器
標(biāo)簽選擇器、偽元素選擇器
通配符選擇器
瀏覽器自定義
注意：在屬性后面使用!important會覆蓋頁面內(nèi)任何位置定義的元素樣式。
復(fù)雜場景下計算優(yōu)先級：
復(fù)雜場景下將選擇器分為四個級別通過各級別的出現(xiàn)次數(shù)決定。
四個級別分別為：行內(nèi)選擇符、ID選擇符、類別選擇符、元素選擇符。
優(yōu)先級的算法：
- 每個規(guī)則對應(yīng)一個初始"四位數(shù)"：0、0、0、0
- 若是 行內(nèi)選擇符，則加1、0、0、0
- 若是 ID選擇符，則加0、1、0、0
- 若是 類選擇符/屬性選擇符/偽類選擇符，則分別加0、0、1、0
- 若是 元素選擇符/偽元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對應(yīng)的數(shù)相加后得到的“四位數(shù)”，從左到右進(jìn)行比較，大的優(yōu)先級更高。 優(yōu)先級相同時，采用就近原則，即最后出現(xiàn)的樣式。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
樣式聲明順序a:link;a:visited;a:hover;a:active.
:link代表為訪問鏈接的樣式，所以只要你是超鏈接，且未被訪問過，則鏈接都會按照你設(shè)定的樣式顯示，所以它的位置順序無所謂。
:visited代表鏈接訪問后的樣式，則鏈接一旦被訪問，則之后它的樣式就會是你所設(shè)置的visited樣式
:active 選擇器用于選擇活動鏈接。當(dāng)您在一個鏈接上點擊時，它就會成為活動的（激活的）。
:hover 代表的是你光標(biāo)經(jīng)過某一元素時的樣式，如果將此樣式放在:active之后，則當(dāng)鏈接激活時，顯示:active樣式，當(dāng)光標(biāo)經(jīng)過此鏈接時，會顯示hover的樣式，因為hover排在后，會覆蓋active樣式。如果:hover排在前，:active排在后，則當(dāng)光標(biāo)激活時顯示:active的樣式，但當(dāng)光標(biāo)經(jīng)過鏈接時，樣式并未顯示:hover的樣式，而是:active的樣式，因為應(yīng)用的active樣式在hover之后，覆蓋了前面的樣式。
同理我們可以理清:link,:visited,:focus,:hover,:active的順序，即為:link,:visited,:focus,:hover,:active。
以下選擇器分別是什么意思?
. #header{
} /* id為header的css樣式 /
.header{
}/ class為header的css樣式 /
.header .logo{
}/ class為header的元素后代中所有class為logo的元素的css樣式 /
.header.mobile{
}/ class包含header和mobile的元素的css樣式 /
.header p, .header h3{
}/ class為header的元素后代中p元素和h3元素的css樣式 /
. #header .nav>li{
}/ id為header元素后代中有class為nav的元素的直接子元素li的css樣式 /
. #header a:hover{
}/ id為header元素的后代中a元素的狀態(tài)為鼠標(biāo)懸停其上的css樣式 /
. #header .logo~p{
}/ id為header元素的所有后代元素中，class為logo的元素之后的所有同級元素p的css樣式 /
.#header input[type="text"]{
}/ id為header元素的所有后代元素中，所有type="text"的input標(biāo)簽的css樣式 */
列出你知道的偽類選擇器
E:link
匹配所有未被點擊的鏈接E
E:hover
匹配所有鼠標(biāo)懸停其上的元素E
E:active
匹配所有鼠標(biāo)已在其上按著，還未釋放的元素E
E:visited
匹配所有已被點擊的鏈接E
E:focus
匹配所有獲得當(dāng)前焦點的元素E
E:lang(c)
匹配lang屬性為c的E元素
E:enabled
匹配表單可用的E元素
E:disabled
匹配表單被禁用的E元素
E: checked
匹配表單中被選中的radio或checkbox元素
E:selection
匹配用戶當(dāng)前選中的元素
E:root
匹配文檔的根元素，對于html文檔，就是html元素
E:first-child
匹配作為長子（第一個子女）的元素E
E:last-child
匹配作為最后一個子代元素的元素E
E:nth-child(n)
匹配其父元素的第n個子元素，第一個n為1
E:nth-last-child(n)
匹配其父元素的倒數(shù)第n個子元素，倒數(shù)第一個n為1
E:nth-of-type(n)
匹配其父元素下同種標(biāo)簽的第n個子元素
E:nth-of-last-type(n)
匹配其父元素下同種標(biāo)簽的倒數(shù)第n個子元素
運行如下代碼，解析下輸出樣式的原因。
aa字體為紅色： .item1:first-child 匹配元素class包含item1的第一個子元素 aa，所以為顏色變?yōu)榧t色
aa bb的背景色為藍(lán)色： .item1:first-of-type 匹配的是class包含item1其父元素下相同類型子元素中的第一個，所以第一個p 第一個h3變藍(lán)
