1.class 和 id 的使用場景?
class是類违孝，用于CSS刹前，可以多個HTML標(biāo)簽復(fù)用。id是HTML標(biāo)簽的唯一身份證雌桑，具有唯一性喇喉，只允許出現(xiàn)一次，可以用于CSS校坑，也可以用于JS拣技。但一般在實(shí)際的開發(fā)中，class用于CSS耍目，id則用于JS膏斤。
2.CSS選擇器常見的有幾種?
- id選擇器，HTML:
<div id="head"></div>邪驮，CSS:#head{color: red;}莫辨。 - 類選擇器，HTML:
<div class="head"></div>，CSS:.head{color: red;}衔掸。 - 標(biāo)簽選擇器烫幕，HTML:
<div id="head"></div>，CSS:div{color: red;}敞映。 - 偽類選擇器较曼，HTML:
<div class="head"></div>，
CSS:
.head::before{color: red;}振愿，在.head上方增加一個行內(nèi)元素捷犹。
.head::after{color: red;}，在.head下方增加一個行內(nèi)元素冕末。
.head:first-child{color: red;}萍歉，class為head的元素的父元素下的第一個子元素。
.head:last-child{color: red;}档桃，class為head的元素的父元素下的最后一個子元素枪孩。
.head:first-of-type{color: red;}，class為head的元素的父元素下的同種類型元素中的第一個子元素藻肄。
.head:last-of-type{color: red;}蔑舞，class為head的元素的父元素下的同種類型元素中的最后一個子元素。
.head:nth(n)-child{color: red;}嘹屯，class為head的元素的父元素下的第n個子元素攻询。
所以其實(shí)這里的child代表后代，type代表標(biāo)簽類型州弟。 - 組合選擇器钧栖，HTML:
<div>
<p>123</p>
<section><p>456</p></section>
</div>
CSS:div p{color: red;},這是所有后代選擇器，中間以一個空格連接婆翔，凡是div標(biāo)簽后代中的P標(biāo)簽拯杠，都會被選擇，所以這里的123和456都會變紅啃奴。div>p{color: red;}阴挣，這是直接后代選擇器，使用 " > " 連接纺腊，只有div標(biāo)簽下的第一代p標(biāo)簽才會被選中，所以這里只有123會變紅茎芭。
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級揖膜？
優(yōu)先級順序，從上到下梅桩，依次遞減：
1.!important
2.內(nèi)聯(lián)樣式
3.id選擇器
4.class選擇器
5.標(biāo)簽選擇器
6.偽類選擇器
在復(fù)雜場景下壹粟，一般先分別計(jì)算各個選擇器的優(yōu)先級權(quán)重，然后相加得出和，權(quán)重值之和越大趁仙，優(yōu)先級越高洪添。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么雀费？
順序依次為a:link > a:hover > a:active > a:visited干奢。
a:link為標(biāo)簽初始狀態(tài)，未經(jīng)過任何操作盏袄。a:hover是光標(biāo)經(jīng)過標(biāo)簽時的狀態(tài)忿峻。a:active是鼠標(biāo)點(diǎn)擊標(biāo)簽并且還未松開點(diǎn)擊按鍵時的狀態(tài) 。a:visited是點(diǎn)擊標(biāo)簽之后辕羽，松開按鍵逛尚，然后光標(biāo)離開標(biāo)簽之后的狀態(tài)〉笤福可以使用love hate的方式來記憶绰寞，用愛包裹恨，即L(H A)V.
5.以下選擇器分別是什么意思?
- 1為選擇id為header的標(biāo)簽铣口。
- 2為選擇class為header的標(biāo)簽滤钱。
- 3為選擇class為header并且后代class為logo的標(biāo)簽。
- 4為選擇class為header或者class為mobile的標(biāo)簽枷踏，因?yàn)?“ . ” 和 “ # ”也可以作為分隔符菩暗。
- 5其實(shí)是將兩個組合選擇器的縮寫形式，他們共用一個樣式旭蠕，選擇class為header并且后代元素為p標(biāo)簽的標(biāo)簽停团，另外一個是選擇class為header并且后代元素為h3標(biāo)簽的標(biāo)簽。
- 6為選擇id為header并且后代元素的class為nav的標(biāo)簽的直系后代為li標(biāo)簽的標(biāo)簽掏熬。
- 7為選擇id為header并且后代元素為a標(biāo)簽的標(biāo)簽佑稠，當(dāng)鼠標(biāo)光標(biāo)經(jīng)過該標(biāo)簽時，執(zhí)行其中的樣式旗芬。
- 8為選擇id為header并且后代元素的class為logo的標(biāo)簽的所有兄弟p標(biāo)簽舌胶。
- 9為選擇id為header并且后代元素為input標(biāo)簽并且該標(biāo)簽的屬性type=text。
我所知道的偽類選擇器如下：
- ::before,相當(dāng)于在標(biāo)簽的上方加一個span疮丛。
- ::after,相當(dāng)于在標(biāo)簽的下方加一個span幔嫂。
- ::selection，被光標(biāo)選擇的元素誊薄。
- :first-child,滿足冒號左側(cè)條件下的元素的父元素下的第一個滿足冒號左側(cè)條件的子元素履恩。
- :last-child,滿足冒號左側(cè)條件下的元素的父元素下的最后一個滿足冒號左側(cè)條件的子元素。
- :first-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標(biāo)簽）中的第一個滿足冒號左側(cè)條件的子元素呢蔫。
- :last-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標(biāo)簽）中的最后一個滿足冒號左側(cè)條件的子元素切心。
- :nth(n)-of-child,滿足冒號左側(cè)條件下的元素的父元素下的第n個(n其實(shí)是個表達(dá)式，也可改成其他的表達(dá)式，比如2n+1)滿足冒號左側(cè)條件的子元素绽昏。
- :nth(n)-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標(biāo)簽）中的第n個(n其實(shí)是個表達(dá)式协屡，也可改成其他的表達(dá)式，比如2n+1)滿足冒號左側(cè)條件的子元素全谤。
- 還有a標(biāo)簽所特有的偽類選擇器：上面已經(jīng)答過了肤晓，這里就不再過多重復(fù)了。
div:first-child啼县、div:first-of-type材原、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
- 第一個為div標(biāo)簽的父元素下的第一個div標(biāo)簽。
- 第二個為div標(biāo)簽的父元素下的同種類型標(biāo)簽下的第一個類型為div標(biāo)簽的元素季眷。
- 第三個為div標(biāo)簽的后代子元素中的父元素下的第一個子元素余蟹。
- 第四個為div標(biāo)簽的后代子元素的父元素下的同種類型標(biāo)簽下的第一個子元素。
運(yùn)行如下代碼子刮，解析下輸出樣式的原因威酒。
aa字體變紅，背景色變藍(lán)挺峡。
bb僅背景色變藍(lán)葵孤。
ccc無變化。
分析如下：
首先第一個樣式橱赠，
.item1:first-child{
color: red;
}
找到class為item1的元素的父元素尤仍，然后在該父元素下尋找第一個子元素，所以aa字體變紅狭姨。
然后第二個樣式宰啦，
.item1:first-of-type{
background: blue;
}
同樣的，找到class為item1的元素的父元素饼拍，然后在該父元素下的同一種標(biāo)簽中赡模，尋找第一個子元素，發(fā)現(xiàn)p標(biāo)簽的第一個师抄，h3標(biāo)簽的第一個滿足條件漓柑，所以aa,bb的背景色變藍(lán)。
最后叨吮，the ending辆布。
