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