1. class 和 id 的使用場(chǎng)景?

id選擇器： #id{...CSS樣式}
在html中一個(gè)標(biāo)簽只能有一個(gè)唯一的id且每個(gè)id只能使用一次，那么id 選擇器則為標(biāo)有唯一id 的html標(biāo)簽指定特定的樣式。

class選擇器：.class{...CSS樣式}
class選擇器用于描述一組標(biāo)簽的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)標(biāo)簽中使用。

2.CSS選擇器常見(jiàn)的有幾種?

基礎(chǔ)選擇器

組合選擇器：

屬性選擇器：

偽類選擇器：

| 選擇器| 含義|
| --- | --- | --- |
| E:first-child | 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配 |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當(dāng)前選中的元素 |
| E:root | 匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) | 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-child | 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |

偽元素選擇器：

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

優(yōu)先級(jí)從高到低分別是：

1. 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2. 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

復(fù)雜場(chǎng)景計(jì)算優(yōu)先級(jí)：

1. 行內(nèi)樣式計(jì)作a，
2. id選擇器為b，
3. 類，屬性選擇器和偽類選擇器為c，
4. 標(biāo)簽選擇器、偽元素為d，

先比較a的大小，a大的優(yōu)先級(jí)高；如果a相等，再比較b的大小，b大的優(yōu)先級(jí)高以此類推。

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

a偽類的定義順序：

1. a:link 未訪問(wèn)時(shí)的狀態(tài)
2. a:visited 已訪問(wèn)過(guò)的狀態(tài)
3. a:hove 鼠標(biāo)移動(dòng)到鏈接上時(shí)的狀態(tài)
4. a:active 鼠標(biāo)按下去時(shí)的狀態(tài)

原因：

這四個(gè)都屬于偽類選擇器，權(quán)重相同，后面的會(huì)覆蓋前面的效果。在CSS中，如果對(duì)于相同元素有針對(duì)不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。這樣，瀏覽器在顯示元素時(shí)，才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件，才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果。關(guān)于a:link, a:hover, a:active, a:visited 的順序有一個(gè)便于記憶的“愛(ài)恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。

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

 /* 選擇"id=header"的元素 */
  #header{    
  }
 /* 選擇"class=header"的元素 */
  .header{   
  }
  /* 選擇"class=header"元素下"class=logo"的子元素 */
  .header .logo{    
  }
  /* "class=header mobile"的元素 */
  .header.mobile{    
  }
  /* 選擇class為header下的p子元素和h3子元素 */
  .header p, .header h3{     
  }
  /* 選擇"di=header"下的"class=nav"子元素下的直接子元素 li */
  #header .nav>li{     
  }
  /* 選擇"id=header"元素下的a子元素的hover樣式 */
  #header a:hover{    
  }
   /* 選擇"id=header"元素下的"class=logo"子元素之后的同級(jí)的"p"元素（無(wú)論直接相鄰與否） */
  #header .logo~p{  
  }
   /*選擇"id=header"元素下類型是text的輸入框子元素 */
  #header input[type="text"]{ 
  }

列出你知道的偽類選擇器

E:first-child 匹配父元素的的第一個(gè)子元素
E:last-child 匹配父元素的最后一個(gè)子元素
a:link 匹配所有未被點(diǎn)擊的鏈接
a:visited 匹配所有已被點(diǎn)擊的鏈接
a:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素
a:hover 匹配鼠標(biāo)懸停其上的E元素

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

div:first-child：匹配所有div元素的父元素下第一個(gè)子元素,如果第一個(gè)子元素是div，則匹配。否則不匹配，如下：

image.png

div :first-child：匹配所有div元素下的第一個(gè)子元素

div:first-of-type：匹配所有div元素的父元素下的第一個(gè)div元素。

div :first-of-type：匹配所有div元素下的所有不同標(biāo)簽類型標(biāo)簽的第一個(gè)元素，如下：

image.png

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

image.png

原因：
.item1:first-child 選擇器匹配的是class="item1"元素的父元素下的第一個(gè)class="item1"的子元素，所以<p class="item1">aa</p>被選中，所以字體為紅色
注意： 子元素的class="item1" 且必須是第一個(gè)子元素，否則不能匹配，如下：

image.png

.item1:first-of-type 選擇器匹配的是class="item1"元素的父元素中class="item1"的使用同種標(biāo)簽的第一個(gè)子元素。
子元素的標(biāo)簽必須與class="item1"的元素是同種標(biāo)簽，所以第一個(gè)<p class="item1">aa</p>，與第一個(gè)<h3 class="item1">bb</h3>被選中，背景變?yōu)樗{(lán)色

注意：class="item1" 且 必須為同種標(biāo)簽中的第一個(gè)子元素才能匹配，否則不能匹配，如下：

image.png