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

• id：id選擇器是趴，使用#name定義（name為id名），使用id="name"調(diào)用澄惊，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次唆途，多用于頁(yè)面分塊的塊級(jí)標(biāo)簽上；
• class：類選擇器掸驱，使用.name定義（name為類名肛搬，可任意取名），使用class="name"調(diào)用毕贼，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上温赔，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)；

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

2.1 基礎(chǔ)選擇器

2.2 組合選擇器

2.3 屬性選擇器

2.4 偽類選擇器

N的取值
1贝咙，2，3拂募，4庭猩，5
2n+1, 2n, 4n-1
odd, even

2.5 偽元素選擇器

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

3.1 選擇器的優(yōu)先級(jí)（權(quán)重）由高到低如下：

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

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

選擇器的特殊性分為四個(gè)部分陈症，即 a,b,c,d,各代表如下：

• 行內(nèi)樣式 <div style="xxx"></div> ==> a
• ID 選擇器 ==> b
• 類蔼水，屬性選擇器和偽類選擇器 ==> c
• 標(biāo)簽選擇器、偽元素 ==> d
  那么每一個(gè)CSS的聲明均可分解為a录肯，b趴腋，c，d论咏，四部分优炬，權(quán)重關(guān)系a>b>c>d，如果要比較兩個(gè)聲明哪個(gè)權(quán)重高厅贪，需按a到d的順序進(jìn)行依次對(duì)比蠢护，a值大的相對(duì)權(quán)重高；如果a值相同养涮，則比較b值葵硕，此時(shí)b值大的權(quán)重高眉抬；如果b值也相同，則比較c值...
  如果選擇器相同懈凹，后定義的選擇器會(huì)覆蓋先定義的選擇器

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

順序?yàn)?a:link, a:visited a:hover, a:active,
分析原因：偽類選擇器權(quán)重相同蘸劈，后定義的選擇器會(huì)覆蓋先定義的選擇器昏苏。
未點(diǎn)擊鏈接前，link偽類處于激活狀態(tài)威沫，鼠標(biāo)懸停（或點(diǎn)擊）時(shí)贤惯，a鏈接同時(shí)處于link和hover(或active)狀態(tài)，由于它們特指度相同棒掠，
在同時(shí)激活的情況下孵构，后出現(xiàn)的偽類樣式會(huì)覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前烟很。
　　再討論hover和active的順序颈墅，若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬雾袱，實(shí)際你在激活active狀態(tài)的同時(shí)觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色恤筛，所以無法看到active的顏色。故hover在active之前
　　其次芹橡，若把visited放在hover后面毒坛，那已訪問過的鏈接一直觸發(fā)著visited偽類，會(huì)覆蓋hover樣式林说。
　　最后煎殷，其實(shí)link、visited兩個(gè)偽類之間順序無所謂腿箩。（因?yàn)樗鼈z不可能同時(shí)觸發(fā)豪直，即又未訪問同時(shí)又已訪問。）

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

#header{
} /* 選中ID="header"的元素 */
.header{
} /* 選中class="header"的元素 */
.header .logo{
} /* 選中class="header"的元素的后代元素中 class="logo"的元素 */
.header.mobile{
} /* 選中class="header mobile"的元素珠移，要求class既有header又有mobile */
.header p, .header h3{
}  /* 選中class="header"的元素的后代元素中帶有p標(biāo)簽的元素弓乙，以及class="header"的元素的后代元素中帶有h3標(biāo)簽的元素 */
#header .nav>li{
} /* 選中ID="header"的元素的后代元素中class="nav"的直接子元素li元素 */
#header a:hover{
} /* 選中ID="header" 的元素的后代元素中鼠標(biāo)懸停其上的元素 */
#header .logo~p{
}  /* 選中ID="header"的元素的后代元素中、與class="logo"的元素同級(jí)的p元素 */
#header input[type="text"]{
} /* 選中ID="header"的元素的后代元素中剑梳、input type為text的input元素 */

6. 列出你知道的偽類選擇器

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

• div:first-child
  與div同級(jí)的元素中的第一個(gè)元素骂倘，且這個(gè)元素為div
• div:first-of-type
  div父元素中第一個(gè)使用div的標(biāo)簽
• div :first-child
  div元素下的第一個(gè)子元素
• div :first-of-type
  div元素下所有的同類型的第一個(gè)元素

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

<style>
.item1:first-child{
  color: red;
} /* 選中class="iterm1"的第一個(gè)子元素巴席，故 <p class="item1">aa</p>被選中 */
.item1:first-of-type{
  background: blue;
} /* 選中id為item1的父元素下每種類型的第一個(gè)子元素历涝，即  <p class="item1">aa</p>和 <h3 class="item1">bb</h3>被選中，*/
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>