class和id的使用場景

• class用于主區塊里面的詳細內容，同一個class可以重復出現，一個標簽可以有幾個不同的class。
• id多使用于主要塊級元素，id一個頁面中只能出現一次，有些獨一無二元素也可用id。

CSS選擇器常見的有幾種

• 基礎選擇器

• 組合選擇器

• 屬性選擇器

• 偽類選擇器

• 偽元素選擇器

選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

選擇器的優先級從高到低分別是

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

復雜場景優先級計算規則是

1. 行內樣式計數1000；
2. id選擇器計數100；
3. 類、屬性、偽類選擇器計數10；
4. 標簽、偽元素選擇器計數1；
5. 通過以上計數計算選擇前的優先級結果，數字越大優先級越高。

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

a:link -> a:visited -> a:hover -> a:active

• 鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover、a:active三種屬性，后面的屬性會覆蓋前面的屬性定義，所以a:link必須放在a:hover的前面，a:hover必須放在a:active的前
• 鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover、a:link三種屬性，后面的屬性會覆蓋前面的屬性定義，此時a:visted和a:link必須放在a:hover的前面

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

• #header id名為header的元素
• .header class名為header的元素
• .header .logo class名為header的元素下的class名為logo的子元素
• .header.mobile class名同時為header和mobile的元素
• .header p, .header h3 class名為header的元素下所有的p子元素和h3子元素
• #header .nav>li id名為header的元素下的所有class名為nav的子元素的直接子元素li
• #header a:hover id名為header的元素下的所有a標簽在鼠標懸停時的狀態
• #header .logo~p id名為header的元素下的class名為logo的元素及其后面的同級p元素
• #header input[type="text"] id名為header的元素下的所有type屬性為text的input元素

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元素下的所有后代中標簽相同的第一個子元素

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

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

• A行作為.item1的父元素下的第一個子元素，文字顏色被改為紅色；同時作為.item1的父元素下的第一個p元素，背景色改為藍色。
• B行作為.item1的父元素下的第一個h3元素，背景色改為藍色；但它不是其父元素的第一個子元素，文字顏色不變。
• C行既不是.item1的第一個子元素，也不是.item1的第一個h3元素，文字顏色和背景色都不變。