1.class 和 id 的使用場景?
class是類，用于CSS，可以多個HTML標簽復用。id是HTML標簽的唯一身份證，具有唯一性，只允許出現一次，可以用于CSS，也可以用于JS。但一般在實際的開發中，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上方增加一個行內元素。
.head::after{color: red;}，在.head下方增加一個行內元素。
.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.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
優先級順序，從上到下，依次遞減：
1.!important
2.內聯樣式
3.id選擇器
4.class選擇器
5.標簽選擇器
6.偽類選擇器
在復雜場景下，一般先分別計算各個選擇器的優先級權重，然后相加得出和，權重值之和越大，優先級越高。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序依次為a:link > a:hover > a:active > a:visited。
a:link為標簽初始狀態，未經過任何操作。a:hover是光標經過標簽時的狀態。a:active是鼠標點擊標簽并且還未松開點擊按鍵時的狀態 。a:visited是點擊標簽之后，松開按鍵，然后光標離開標簽之后的狀態。可以使用love hate的方式來記憶，用愛包裹恨，即L(H A)V.
5.以下選擇器分別是什么意思?
- 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標簽的標簽，當鼠標光標經過該標簽時，執行其中的樣式。
- 8為選擇id為header并且后代元素的class為logo的標簽的所有兄弟p標簽。
- 9為選擇id為header并且后代元素為input標簽并且該標簽的屬性type=text。
我所知道的偽類選擇器如下：
- ::before,相當于在標簽的上方加一個span。
- ::after,相當于在標簽的下方加一個span。
- ::selection，被光標選擇的元素。
- :first-child,滿足冒號左側條件下的元素的父元素下的第一個滿足冒號左側條件的子元素。
- :last-child,滿足冒號左側條件下的元素的父元素下的最后一個滿足冒號左側條件的子元素。
- :first-of-type,滿足冒號左側條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的第一個滿足冒號左側條件的子元素。
- :last-of-type,滿足冒號左側條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的最后一個滿足冒號左側條件的子元素。
- :nth(n)-of-child,滿足冒號左側條件下的元素的父元素下的第n個(n其實是個表達式，也可改成其他的表達式，比如2n+1)滿足冒號左側條件的子元素。
- :nth(n)-of-type,滿足冒號左側條件下的元素的父元素下的同種類型元素（意思就是同一種HTML標簽）中的第n個(n其實是個表達式，也可改成其他的表達式，比如2n+1)滿足冒號左側條件的子元素。
- 還有a標簽所特有的偽類選擇器：上面已經答過了，這里就不再過多重復了。
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
- 第一個為div標簽的父元素下的第一個div標簽。
- 第二個為div標簽的父元素下的同種類型標簽下的第一個類型為div標簽的元素。
- 第三個為div標簽的后代子元素中的父元素下的第一個子元素。
- 第四個為div標簽的后代子元素的父元素下的同種類型標簽下的第一個子元素。
運行如下代碼，解析下輸出樣式的原因。
aa字體變紅，背景色變藍。
bb僅背景色變藍。
ccc無變化。
分析如下：
首先第一個樣式，
.item1:first-child{
color: red;
}
找到class為item1的元素的父元素，然后在該父元素下尋找第一個子元素，所以aa字體變紅。
然后第二個樣式，
.item1:first-of-type{
background: blue;
}
同樣的，找到class為item1的元素的父元素，然后在該父元素下的同一種標簽中，尋找第一個子元素，發現p標簽的第一個，h3標簽的第一個滿足條件，所以aa,bb的背景色變藍。
最后，the ending。
