1. class 和 id 的使用場景?

id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調(diào)用，其優(yōu)先級高于類選擇器，一個標(biāo)簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標(biāo)簽上；
class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調(diào)用，一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上，多用于多個標(biāo)簽樣式相似或完全相同時；

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

1. 標(biāo)簽選擇器
2. 類選擇器
3. id選擇器
4. *通用選擇器
5. >直接后代選擇器
6. 空格 后代選擇器

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

利用選擇器權(quán)重，組合選擇器可以計算權(quán)重比較大小

1. 標(biāo)簽選擇器 1
2. 類選擇器 10
3. id選擇器 100
4. *通用選擇器 0.1

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

順序是：(1) a:link(2)a:visited(3)a:hover(4)a:active

因為未點(diǎn)擊鏈接前，link偽類長期處于激活狀態(tài)，鼠標(biāo)懸停（或點(diǎn)擊）時，a鏈接同時處于link和hover(或active)狀態(tài)，由于它們特指度相同，
在同時激活的情況下，后出現(xiàn)的偽類樣式會覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前。
　　再討論hover和active的順序，若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前
　　其次，若把visited放在hover后面，那已訪問過的鏈接一直觸發(fā)著visited偽類，會覆蓋hover樣式。
　　最后，其實link、visited兩個偽類之間順序無所謂。（因為它倆不可能同時觸發(fā)，即又未訪問同時又已訪問。）

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

#header{/*id為header*/
}
.header{/*class為header*/
}
.header .logo{/*class為header下的class為logo的元素*/
}
.header.mobile{/*class為header下的class為mobile的元素*/
}
.header p, .header h3{/*class為header下的class為p的元素和class為header下的class為h3的元素*/

}
#header .nav>li{/*id為header下的class為nav的直接后代li元素*/
}
#header a:hover{/*id為header下的a標(biāo)簽在懸浮狀態(tài)下*/
}
#header .logo~p{/匹配id為header的元素的后代class為logo 的元素之后的同級p標(biāo)簽*/
}
#header input[type="text"]{/*id為header下的type屬性為text的input元素
}

• 列出你知道的偽類選擇器
  ::first-child
  ::hover
  ::link
  ::active
  ::visited
  ::focus
  ::enabled
  ::disabled

• div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
  div:first-child選擇屬于其父元素的首個子元素的每個 <div> 元素
  div:first-of-type匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1)
  div :first-child 有空格選擇div的后代第一個元素
  div :first-of-type有空格選擇div下使用同種標(biāo)簽的第一個元素

• 運(yùn)行如下代碼，解析下輸出樣式的原因。

<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>

item1:first-child選擇item1的父元素ct的第一個item1，所以aa是紅色的
.item1:first-of-type選擇item1的父元素ct的第一個p元素和第一個h3元素，所以aa和bb背景是藍(lán)色的