class 和 id 的使用場(chǎng)景?
class 重在樣式的復(fù)用总珠，重普遍性屏鳍。
id重在劃分樣式區(qū)域，可以作為樣式表中的命名空間來(lái)管理樣式局服。
id也可以指定某一個(gè)特殊元素的樣式钓瞭，重特殊性。
注意：在html中聲明多個(gè)一樣的ID的元素淫奔，在css中該ID的樣式山涡，這些元素則都會(huì)生效。而在javascript中用DOM選擇器只會(huì)選到第一個(gè)元素唆迁。
CSS選擇器常見(jiàn)的有幾種?
1.基礎(chǔ)選擇器
通用元素選擇器
id選擇器
類(lèi)選擇器
標(biāo)簽選擇器
2.組合選擇器
E,F 多元素選擇器鸭丛，用,分隔，同時(shí)匹配元素E或元素F
E F 后代選擇器媒惕，用空格分隔系吩，匹配E元素所有的后代元素F
E>F 子元素選擇器，用>分隔妒蔚，匹配E元素的所有直接子元素
E~F 普通相鄰選擇器（弟弟選擇器）穿挨，匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否）
.class1.class2 id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符，. 和 # 本身充當(dāng)分隔符的元素
element#id id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符肴盏，. 和 # 本身充當(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具有多個(gè)空格分隔菜皂、其中一個(gè)值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開(kāi)頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
4.偽類(lèi)選擇器:
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下贞绵、還沒(méi)有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素恍飘，第一個(gè)編號(hào)為1
E:nth-of-type(n) 與:nth-child()作用類(lèi)似榨崩，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素
5.偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)章母？
css樣式的簡(jiǎn)單權(quán)重級(jí)別由高到低排列：
作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id 選擇器
類(lèi)選擇器母蛛、偽類(lèi)選擇器、屬性選擇器
標(biāo)簽選擇器乳怎、偽元素選擇器
通配符選擇器
瀏覽器自定義
注意：在屬性后面使用!important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式彩郊。
復(fù)雜場(chǎng)景下計(jì)算優(yōu)先級(jí)：
復(fù)雜場(chǎng)景下將選擇器分為四個(gè)級(jí)別通過(guò)各級(jí)別的出現(xiàn)次數(shù)決定。
四個(gè)級(jí)別分別為：行內(nèi)選擇符蚪缀、ID選擇符秫逝、類(lèi)別選擇符、元素選擇符询枚。
優(yōu)先級(jí)的算法：
- 每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：0违帆、0、0金蜀、0
- 若是 行內(nèi)選擇符前方，則加1狈醉、0廉油、0惠险、0
- 若是 ID選擇符，則加0抒线、1班巩、0、0
- 若是 類(lèi)選擇符/屬性選擇符/偽類(lèi)選擇符嘶炭，則分別加0抱慌、0、1眨猎、0
- 若是 元素選擇符/偽元素選擇符抑进，則分別加0、0睡陪、0寺渗、1
算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的“四位數(shù)”兰迫，從左到右進(jìn)行比較信殊，大的優(yōu)先級(jí)更高。 優(yōu)先級(jí)相同時(shí)汁果，采用就近原則涡拘，即最后出現(xiàn)的樣式。
a:link, a:hover, a:active, a:visited 的順序是怎樣的据德？ 為什么鳄乏？
樣式聲明順序a:link;a:visited;a:hover;a:active.
:link代表為訪問(wèn)鏈接的樣式，所以只要你是超鏈接棘利，且未被訪問(wèn)過(guò)橱野，則鏈接都會(huì)按照你設(shè)定的樣式顯示，所以它的位置順序無(wú)所謂赡译。
:visited代表鏈接訪問(wèn)后的樣式仲吏，則鏈接一旦被訪問(wèn)，則之后它的樣式就會(huì)是你所設(shè)置的visited樣式
:active 選擇器用于選擇活動(dòng)鏈接蝌焚。當(dāng)您在一個(gè)鏈接上點(diǎn)擊時(shí)裹唆，它就會(huì)成為活動(dòng)的（激活的）。
:hover 代表的是你光標(biāo)經(jīng)過(guò)某一元素時(shí)的樣式只洒，如果將此樣式放在:active之后许帐，則當(dāng)鏈接激活時(shí)，顯示:active樣式毕谴，當(dāng)光標(biāo)經(jīng)過(guò)此鏈接時(shí)成畦，會(huì)顯示hover的樣式距芬，因?yàn)閔over排在后，會(huì)覆蓋active樣式循帐。如果:hover排在前框仔，:active排在后，則當(dāng)光標(biāo)激活時(shí)顯示:active的樣式拄养，但當(dāng)光標(biāo)經(jīng)過(guò)鏈接時(shí)离斩，樣式并未顯示:hover的樣式，而是:active的樣式瘪匿，因?yàn)閼?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的元素之后的所有同級(jí)元素p的css樣式 /
.#header input[type="text"]{
}/ id為header元素的所有后代元素中顽染，所有type="text"的input標(biāo)簽的css樣式 */
列出你知道的偽類(lèi)選擇器
E:link
匹配所有未被點(diǎn)擊的鏈接E
E:hover
匹配所有鼠標(biāo)懸停其上的元素E
E:active
匹配所有鼠標(biāo)已在其上按著漾岳，還未釋放的元素E
E:visited
匹配所有已被點(diǎn)擊的鏈接E
E:focus
匹配所有獲得當(dāng)前焦點(diǎn)的元素E
E:lang(c)
匹配lang屬性為c的E元素
E:enabled
匹配表單可用的E元素
E:disabled
匹配表單被禁用的E元素
E: checked
匹配表單中被選中的radio或checkbox元素
E:selection
匹配用戶當(dāng)前選中的元素
E:root
匹配文檔的根元素，對(duì)于html文檔家乘，就是html元素
E:first-child
匹配作為長(zhǎng)子（第一個(gè)子女）的元素E
E:last-child
匹配作為最后一個(gè)子代元素的元素E
E:nth-child(n)
匹配其父元素的第n個(gè)子元素蝗羊，第一個(gè)n為1
E:nth-last-child(n)
匹配其父元素的倒數(shù)第n個(gè)子元素，倒數(shù)第一個(gè)n為1
E:nth-of-type(n)
匹配其父元素下同種標(biāo)簽的第n個(gè)子元素
E:nth-of-last-type(n)
匹配其父元素下同種標(biāo)簽的倒數(shù)第n個(gè)子元素
運(yùn)行如下代碼仁锯，解析下輸出樣式的原因耀找。
aa字體為紅色： .item1:first-child 匹配元素class包含item1的第一個(gè)子元素 aa，所以為顏色變?yōu)榧t色
aa bb的背景色為藍(lán)色： .item1:first-of-type 匹配的是class包含item1其父元素下相同類(lèi)型子元素中的第一個(gè)业崖，所以第一個(gè)p 第一個(gè)h3變藍(lán)
