一，class 和 id 的使用場(chǎng)景?

id選擇器，匹配特定id的元素。
class是類選擇器，匹配class包含（不是等于）特定類的元素。

• 兩者的區(qū)別
  id選擇器是唯一的，一個(gè)id在一個(gè)頁(yè)面中只可以使用一次，不允許出現(xiàn)相同id的兩個(gè)元素，但是同個(gè)class在一個(gè)頁(yè)面中可以有多個(gè)。
  在選擇器優(yōu)先級(jí)上，id的優(yōu)先級(jí)要高于class。
• 應(yīng)用的場(chǎng)景

1. id

根據(jù)提供的唯一的id，快速獲取標(biāo)簽對(duì)象。例如
document.getElementById(id);
在<label>標(biāo)簽中使用，用id和label標(biāo)簽的for屬性進(jìn)行配對(duì),例如

<label for="username">用戶名</label>
<input type="text" name="username" id="username">

2. class

把一些要用到的特定的樣式放到一個(gè)class類中，當(dāng)需要用到這些特定的樣式的時(shí)候，給相應(yīng)的元素加上這個(gè)class類就好。

id一般多用于外部結(jié)構(gòu)，例如header，content，footer等有著唯一特定id的元素上，而class一般是用于內(nèi)部結(jié)構(gòu)的可能需要相同樣式的一些元素（比如說(shuō)幾個(gè)需要相同樣式的div）上。另外一般讓class做id的子元素。

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

常見(jiàn)的選擇器可以分為：

1, 基礎(chǔ)選擇器

2. 組合選擇器

E>F使用的比E F多，因?yàn)镋 F可能選擇多了一些元素，導(dǎo)致一些誤操作。

3. 屬性選擇器

4. 偽類選擇器
   可以理解為一個(gè)元素的另外一種狀態(tài)

選擇器使用舉例分析(first-child)：

<style type="text/css">
    .child:first-child{
        color: red;
    }
</style>

<div class="warp">
    <h1 class="child">h1</h1>
    <h2 class="child">h2</h2>
    <div class="ct">
        <h1 class="child">ct-h1</h1>
    </div>
</div>

在上述代碼中，.warp的div中包含了.child的h1和h2，以及.ct的div，.ct的div中有.child的ct-h1。
當(dāng)給當(dāng)前結(jié)構(gòu)加上上述樣式的時(shí)候, .child的元素有三個(gè)，前2個(gè)為h1和h2，他們的父元素是.warp的div，所以父元素下的第一個(gè)子元素為.child的h1,然后第三個(gè).child的ct-h1的父元素為.ct的div，.ct的div的第一個(gè)子元素是.child的ct-h1,所以，在本例中，.child的h1和.child的ct-h1會(huì)應(yīng)用樣式。
first-of-type舉例：

<style type="text/css">
    .child:first-of-type{
        color: red;
    }
</style>

<div class="warp">
    <h1 class="child">h1</h1>
    <h2 class="child">h2</h2>
    <div class="ct">
        <h1 class="child">ct-h1</h1>
    </div>
    <h2 class="child">h2-btm</h2>
</div>

上述代碼中，應(yīng)用first-of-type選擇器的時(shí)候，.child的元素有h1,h2,ct-h1,h2-btm四個(gè)元素。h1,h2，h2-btm的父元素為.warp的div，其中h1和h2都是父元素下的同種標(biāo)簽的第一個(gè)元素，所以會(huì)被選中，而后面的h2-btm因?yàn)榍懊嬉呀?jīng)有h2了，所以不是第一個(gè)h2標(biāo)簽而是第二個(gè)h2標(biāo)簽，故此不會(huì)被選中。而ct-h1的父元素是ct， ct-h1是父元素下的第一個(gè)同類標(biāo)簽，故此也會(huì)被選中。

nth-child(n)和nth-of-type(n)當(dāng)n=1時(shí)，和first-child，first-of-type相同。
對(duì)于n的取值：

• 1,2,3,4,5
• 2n+1(奇數(shù)),2n(偶數(shù)),4n-1
• odd(奇數(shù)),even(偶數(shù))

5. 偽元素選擇器

before和after使用的時(shí)候必須要有content屬性。
應(yīng)用舉例：

<style type="text/css">
    .warp::before{
        content: 'before';
    }
</style>

<div class="warp">
    <h1 class="child">h1</h1>
    <h2 class="child">h2</h2>
    <div class="ct">
        <h1 class="child">ct-h1</h1>
    </div>
    <h2 class="child">h2-btm</h2>
</div>

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

多種樣式應(yīng)用在同一元素上時(shí)：

<style type="text/css">
    #text{
        color: red;
    }
    p{
        color: blue;
    }
</style>

<p id="text">text</p>

• CSS優(yōu)先級(jí)排序（從高到底）：

1. ！important加到元素后，會(huì)覆蓋掉頁(yè)面中任何位置定義的元素樣式

p{
    color: red!important;
}

2. 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

• 復(fù)雜情景下的優(yōu)先級(jí)計(jì)算

我們給行內(nèi)樣式<div style="xxx"></div>設(shè)為==>a
ID選擇器設(shè)為==>b
類，屬性選擇器和偽類選擇器設(shè)為==>c
標(biāo)簽選擇器，偽元素設(shè)為==>d
*選擇器不計(jì)數(shù)

計(jì)算舉例：

1. • a=0 b=0 c=0 d=0 --->0,0,0,0
2. p a=0 b=0 c=0 d=1 --->0,0,0,1
3. a:hover a=0 b=0 c=1 d=1(a算一個(gè)標(biāo)簽選擇器所以d=1，hover算偽類，c=1) ---> 0,0,1,1
4. ul li a=0 b=0 c=0 d=2(2個(gè)標(biāo)簽選擇器) ---> 0,0,0,2
5. ul ol+li a=0 b=0 c=0 d=3(3個(gè)標(biāo)簽選擇器) --->0,0,0,3
6. h1+input[type=hidden] a=0 b=0 c=1(type=hidden一個(gè)屬性選擇器) d=2(h1和input 2個(gè)標(biāo)簽選擇器) ---> 0,0,1,2
7. ul ol li:active a=0 b=0 c=1(active c=1) d=3(3個(gè)標(biāo)簽選擇器) ---> 0,0,1,3
8. #ct .box p a=0 b=1(#ct) c=1(.box) d=1(p) --->0,1,1,1
9. div#header:after a=0 b=1(#header) c=0 d=2(divh和：after) --->0,1,0,2
10. style="" a=1 b=0 c=0 d=0 ----> 1,0,0,0

通過(guò)比較計(jì)算得到的值來(lái)確定優(yōu)先級(jí)，先比較a的大小，a相等再比較b，b相等再比較c，以此類推。

• 樣式覆蓋

div{
    color: red;
}
div{
    color: blue;
}

后面的樣式會(huì)覆蓋前面的樣式，只有后面的樣式會(huì)起作用

• 選擇器使用經(jīng)驗(yàn)

1. 遵守CSS書(shū)寫規(guī)范
2. 使用合理的命名空間，不建議使用標(biāo)簽選擇器
3. 合理的復(fù)用class

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

• 標(biāo)簽偽類的作用：
  ":link": a標(biāo)簽還未被訪問(wèn)的狀態(tài)；
  ":visited": a標(biāo)簽已被訪問(wèn)過(guò)的狀態(tài)；
  ":hover": 鼠標(biāo)懸停在a標(biāo)簽上的狀態(tài)；
  ":active": a標(biāo)簽被鼠標(biāo)按著時(shí)的狀態(tài)；

• 寫樣式時(shí)候的順序：
  LVHA
  1.a:link
  2.a:visited
  3.a:hover
  4.a:active

• 這樣寫的原因：
  這樣寫的原因是由兩點(diǎn)決定的，第一點(diǎn)"相同優(yōu)先級(jí)的樣式，后面的會(huì)覆蓋前面的樣式"，第二點(diǎn)是鼠標(biāo)點(diǎn)擊動(dòng)作的先后順序。
  link和visited是常態(tài)，而hover和active是即時(shí)狀態(tài)，h和a觸發(fā)時(shí)，即時(shí)狀態(tài)會(huì)覆蓋l和v的常態(tài)，所以即時(shí)狀態(tài)要放在常態(tài)的后面。
  常態(tài)情況下：訪問(wèn)過(guò)之后，就要呈現(xiàn)出visited的樣式，所以visited要放到Link后面。
  即時(shí)狀態(tài)下：要讓active覆蓋hover的樣式，所以要將active放到后面。

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

#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
#header .logo~p{
}
#header input[type="text"]{
}

#header id為header的元素
.header class為header的元素
.header .log class為header的元素下的class為log的子元素
.header.mobile 同時(shí)具有header類的和mobile類的元素
.header p, .header h3 同時(shí)選中header類的元素下的p標(biāo)簽元素和h3標(biāo)簽元素
#header .nav>li id為header的元素下的nav類的元素下的直接標(biāo)簽為li的子元素
#header a:hover 表示id為header的元素下的標(biāo)簽為a的元素鼠標(biāo)懸浮下的元素
#header .logo~p 表示id為header的元素下的類為logo的元素之后的所有同級(jí)的標(biāo)簽為p的元素
#header input[type="text"] 表示id為header的元素下的擁有值為text的type屬性的input標(biāo)簽

六，列出你知道的偽類選擇器

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

div:first-child表示div同級(jí)的第一個(gè)而且是div元素
div:first-of-type 表示div元素的父元素下的第一個(gè)標(biāo)簽為div的子元素
div :first-child 表示div元素下的作為其父元素下的所有第一個(gè)子元素
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>

運(yùn)行結(jié)果為aa應(yīng)用了color: red的樣式，aa和bb應(yīng)用了background: blue的樣式。

結(jié)果分析：

• first-child
  .item1的元素有aa，bb和ccc，他們?nèi)齻€(gè)元素的父元素都為.ct的div，.ct的div下的第一個(gè)元素為.item1的aa，所以只有aa應(yīng)用了該樣式。
• first-of-type
  .item1的元素有標(biāo)簽為p的aa，標(biāo)簽為h3的bb和ccc。對(duì)于p標(biāo)簽的aa，其父元素.ct下的第一個(gè)標(biāo)簽為p的元素就是aa,對(duì)于標(biāo)簽為h3的bb和ccc，其父元素.ct下的第一個(gè)標(biāo)簽為h3的為bb，所以只有aa和bb應(yīng)用了樣式。