1.class 和 id 的使用場景?

• id 一個標簽只能有一個id且每個id只能使用一次，所以一般用在頁面分區上
• class 一個標簽可以有多個類且同一個類可以用在不同的標簽，所以多用于樣式的復用上

2.CSS選擇器常見的有幾種？

• 基礎選擇器

• 組合選擇器

后代選擇器 和 子元素選擇器 有什么區別？
子元素選擇器是選擇直接子元素，后代選擇器則在全部子元素里選擇

• 屬性選擇器

• 偽類選擇器

• 偽元素選擇器

3.1選擇器的優先級是怎樣的?

從高到低分別是

1. 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
2. 作為style屬性寫在元素標簽上的內聯樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

3.2對于復雜場景如何計算優先級？

復雜場景下將選擇器分為：行內選擇符、ID選擇符、類別選擇符、元素選擇符這四個級別通過各級別的出現次數決定。

• 每個規則對應一個初始"四位數"：0、0、0、0
• 每出現一次對應的位數+1
• 最后四個數從左往右比較越左權重越大，數值越大優先級越高

4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

• 聲明順序：a:link,a:visited,a:hover,a:active
• a:link 代表為訪問鏈接的樣式，只要是超鏈接且未被訪問，則鏈接就會按照設定的樣式顯示，所以它的位置前后無所謂
• a:visited 代表鏈接訪問后的樣式，只要鏈接被訪問過了，那么之后就會按照你設置的樣式顯示
• a:hover 代表的是你光標經過某一元素時的樣式 ，如果放在a:active 后面，因為是鼠標點擊的時候是一直處于a:hover狀態，會覆蓋掉a:active的樣式。所以應該排在a:active前面，使得a:active為最后的樣式。

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

#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樣式 */

6.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別

• div:first-child 匹配父元素下，作為第一個子元素的div元素
• div:first-of-type 匹配父元素的子元素中，第一個div元素
• div :first-child 匹配所有div元素內所有元素中屬于其父元素的首個子元素
• div :first-of-type 匹配所有div元素內所有元素中屬于其父元素的首個類型的子元素

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

 <style>
    .item1:first-child{
      color: red;
    }
    .item1:first-of-type{
      background: blue;
    }
    </style>
    <div class="ct">
       <p class="item1">aa</p>
       <h3 class="item1">bb</h3>
       <h3 class="item1">ccc</h3>
    </div>

aa,bb為藍色背景，aa字體為紅色，bb,ccc的字體為黑色。
原因：

• .item1:first-child 匹配元素class包含item1的第一個子元素 aa，所以為顏色變為紅色
• item1:first-of-type 匹配的是class包含item1其父元素下相同類型子元素中的第一個，所以第一個p 第一個h3變藍