1.class 和 id 的使用場景?

class是類，用于CSS，可以多個HTML標簽復(fù)用。id是HTML標簽的唯一身份證，具有唯一性，只允許出現(xiàn)一次，可以用于CSS，也可以用于JS。但一般在實際的開發(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;}。
• 標簽選擇器，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個子元素。
  所以其實這里的child代表后代，type代表標簽類型。
• 組合選擇器，HTML:

<div>
        <p>123</p>
        <section><p>456</p></section>
    </div>

CSS:div p{color: red;},這是所有后代選擇器，中間以一個空格連接，凡是div標簽后代中的P標簽，都會被選擇，所以這里的123和456都會變紅。div>p{color: red;}，這是直接后代選擇器，使用 " > " 連接，只有div標簽下的第一代p標簽才會被選中，所以這里只有123會變紅。

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

優(yōu)先級順序，從上到下，依次遞減：
1.!important
2.內(nèi)聯(lián)樣式
3.id選擇器
4.class選擇器
5.標簽選擇器
6.偽類選擇器
在復(fù)雜場景下，一般先分別計算各個選擇器的優(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為標簽初始狀態(tài)，未經(jīng)過任何操作。a:hover是光標經(jīng)過標簽時的狀態(tài)。a:active是鼠標點擊標簽并且還未松開點擊按鍵時的狀態(tài) 。a:visited是點擊標簽之后，松開按鍵，然后光標離開標簽之后的狀態(tài)?？梢允褂胠ove hate的方式來記憶，用愛包裹恨，即L(H A)V.

5.以下選擇器分別是什么意思?

選擇器.png

• 1為選擇id為header的標簽。
• 2為選擇class為header的標簽。
• 3為選擇class為header并且后代class為logo的標簽。
• 4為選擇class為header或者class為mobile的標簽，因為 “ . ” 和 “ # ”也可以作為分隔符。
• 5其實是將兩個組合選擇器的縮寫形式，他們共用一個樣式，選擇class為header并且后代元素為p標簽的標簽，另外一個是選擇class為header并且后代元素為h3標簽的標簽。
• 6為選擇id為header并且后代元素的class為nav的標簽的直系后代為li標簽的標簽。
• 7為選擇id為header并且后代元素為a標簽的標簽，當(dāng)鼠標光標經(jīng)過該標簽時，執(zhí)行其中的樣式。
• 8為選擇id為header并且后代元素的class為logo的標簽的所有兄弟p標簽。
• 9為選擇id為header并且后代元素為input標簽并且該標簽的屬性type=text。

我所知道的偽類選擇器如下：

• ::before,相當(dāng)于在標簽的上方加一個span。
• ::after,相當(dāng)于在標簽的下方加一個span。
• ::selection，被光標選擇的元素。
• :first-child,滿足冒號左側(cè)條件下的元素的父元素下的第一個滿足冒號左側(cè)條件的子元素。
• :last-child,滿足冒號左側(cè)條件下的元素的父元素下的最后一個滿足冒號左側(cè)條件的子元素。
• :first-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的第一個滿足冒號左側(cè)條件的子元素。
• :last-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的最后一個滿足冒號左側(cè)條件的子元素。
• :nth(n)-of-child,滿足冒號左側(cè)條件下的元素的父元素下的第n個(n其實是個表達式，也可改成其他的表達式，比如2n+1)滿足冒號左側(cè)條件的子元素。
• :nth(n)-of-type,滿足冒號左側(cè)條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的第n個(n其實是個表達式，也可改成其他的表達式，比如2n+1)滿足冒號左側(cè)條件的子元素。
• 還有a標簽所特有的偽類選擇器：上面已經(jīng)答過了，這里就不再過多重復(fù)了。

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

• 第一個為div標簽的父元素下的第一個div標簽。
• 第二個為div標簽的父元素下的同種類型標簽下的第一個類型為div標簽的元素。
• 第三個為div標簽的后代子元素中的父元素下的第一個子元素。
• 第四個為div標簽的后代子元素的父元素下的同種類型標簽下的第一個子元素。

運行如下代碼，解析下輸出樣式的原因。

代碼.png

aa字體變紅，背景色變藍。
bb僅背景色變藍。
ccc無變化。
分析如下：
首先第一個樣式，

.item1:first-child{
    color: red;
}

找到class為item1的元素的父元素，然后在該父元素下尋找第一個子元素，所以aa字體變紅。
然后第二個樣式，

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

同樣的，找到class為item1的元素的父元素，然后在該父元素下的同一種標簽中，尋找第一個子元素，發(fā)現(xiàn)p標簽的第一個，h3標簽的第一個滿足條件，所以aa,bb的背景色變藍。
最后，the ending。