一纬乍，class 和 id 的使用場景?

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

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

1. id

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

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

2. class

把一些要用到的特定的樣式放到一個class類中工秩，當需要用到這些特定的樣式的時候尸饺，給相應(yīng)的元素加上這個class類就好。

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

二俭缓，CSS選擇器常見的有幾種?

常見的選擇器可以分為：

1, 基礎(chǔ)選擇器

2. 組合選擇器

E>F使用的比E F多，因為E F可能選擇多了一些元素婉刀，導(dǎo)致一些誤操作吟温。

3. 屬性選擇器

4. 偽類選擇器
   可以理解為一個元素的另外一種狀態(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。
當給當前結(jié)構(gòu)加上上述樣式的時候, .child的元素有三個卜范，前2個為h1和h2衔统，他們的父元素是.warp的div，所以父元素下的第一個子元素為.child的h1,然后第三個.child的ct-h1的父元素為.ct的div海雪，.ct的div的第一個子元素是.child的ct-h1,所以锦爵，在本例中，.child的h1和.child的ct-h1會應(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選擇器的時候，.child的元素有h1,h2,ct-h1,h2-btm四個元素湾宙。h1,h2樟氢，h2-btm的父元素為.warp的div冈绊，其中h1和h2都是父元素下的同種標簽的第一個元素，所以會被選中埠啃，而后面的h2-btm因為前面已經(jīng)有h2了死宣，所以不是第一個h2標簽而是第二個h2標簽，故此不會被選中碴开。而ct-h1的父元素是ct毅该， ct-h1是父元素下的第一個同類標簽，故此也會被選中潦牛。

nth-child(n)和nth-of-type(n)當n=1時鹃骂，和first-child，first-of-type相同罢绽。
對于n的取值：

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

5. 偽元素選擇器

before和after使用的時候必須要有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)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級良价？

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

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

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

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

1. 寝殴！important加到元素后，會覆蓋掉頁面中任何位置定義的元素樣式

p{
    color: red!important;
}

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

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

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

計算舉例：

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算一個標簽選擇器所以d=1，hover算偽類痊银，c=1) ---> 0,0,1,1
4. ul li a=0 b=0 c=0 d=2(2個標簽選擇器) ---> 0,0,0,2
5. ul ol+li a=0 b=0 c=0 d=3(3個標簽選擇器) --->0,0,0,3
6. h1+input[type=hidden] a=0 b=0 c=1(type=hidden一個屬性選擇器) d=2(h1和input 2個標簽選擇器) ---> 0,0,1,2
7. ul ol li:active a=0 b=0 c=1(active c=1) d=3(3個標簽選擇器) ---> 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

通過比較計算得到的值來確定優(yōu)先級抵蚊，先比較a的大小，a相等再比較b溯革，b相等再比較c贞绳，以此類推。

• 樣式覆蓋

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

后面的樣式會覆蓋前面的樣式致稀，只有后面的樣式會起作用

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

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

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

• 標簽偽類的作用：
  ":link": a標簽還未被訪問的狀態(tài)；
  ":visited": a標簽已被訪問過的狀態(tài)矛绘；
  ":hover": 鼠標懸停在a標簽上的狀態(tài)耍休；
  ":active": a標簽被鼠標按著時的狀態(tài)；

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

• 這樣寫的原因：
  這樣寫的原因是由兩點決定的货矮，第一點"相同優(yōu)先級的樣式羊精，后面的會覆蓋前面的樣式"，第二點是鼠標點擊動作的先后順序次屠。
  link和visited是常態(tài)园匹，而hover和active是即時狀態(tài)雳刺，h和a觸發(fā)時劫灶，即時狀態(tài)會覆蓋l和v的常態(tài)裸违，所以即時狀態(tài)要放在常態(tài)的后面。
  常態(tài)情況下：訪問過之后本昏，就要呈現(xiàn)出visited的樣式供汛，所以visited要放到Link后面。
  即時狀態(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 同時具有header類的和mobile類的元素
.header p, .header h3 同時選中header類的元素下的p標簽元素和h3標簽元素
#header .nav>li id為header的元素下的nav類的元素下的直接標簽為li的子元素
#header a:hover 表示id為header的元素下的標簽為a的元素鼠標懸浮下的元素
#header .logo~p 表示id為header的元素下的類為logo的元素之后的所有同級的標簽為p的元素
#header input[type="text"] 表示id為header的元素下的擁有值為text的type屬性的input標簽

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

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

div:first-child表示div同級的第一個而且是div元素
div:first-of-type 表示div元素的父元素下的第一個標簽為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>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

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

結(jié)果分析：

• first-child
  .item1的元素有aa，bb和ccc寿桨，他們?nèi)齻€元素的父元素都為.ct的div此衅，.ct的div下的第一個元素為.item1的aa，所以只有aa應(yīng)用了該樣式亭螟。
• first-of-type
  .item1的元素有標簽為p的aa挡鞍，標簽為h3的bb和ccc。對于p標簽的aa预烙，其父元素.ct下的第一個標簽為p的元素就是aa,對于標簽為h3的bb和ccc墨微，其父元素.ct下的第一個標簽為h3的為bb，所以只有aa和bb應(yīng)用了樣式扁掸。