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

• id：id選擇器衙四，使用#name定義（name為id名，可任意取名），使用id="name"調(diào)用遣妥，其優(yōu)先級(jí)高于類(lèi)選擇器，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次攀细，多用于頁(yè)面分塊的塊級(jí)標(biāo)簽上箫踩；
• class：類(lèi)選擇器，使用.name定義（name為類(lèi)名谭贪，可任意取名）境钟，使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類(lèi)且同一個(gè)類(lèi)可以用到不同的標(biāo)簽上俭识，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)慨削。

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

1. 基礎(chǔ)選擇器
2. 組合選擇器
3. 屬性選擇器
4. 偽類(lèi)選擇器
5. 偽元素選擇器

• 基礎(chǔ)選擇器：

• 組合選擇器：

• 屬性選擇器：

• 偽類(lèi)選擇器:

• 偽類(lèi)選擇器:

• 偽元素選擇器:

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

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

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

• 根據(jù)組合選擇器按照以下規(guī)則統(tǒng)計(jì)各類(lèi)選擇器的個(gè)數(shù)：

- 行內(nèi)樣式 --> 統(tǒng)計(jì)為a
- ID選擇器 --> 統(tǒng)計(jì)為b
- 類(lèi)衡便、屬性選擇器、偽類(lèi)選擇器 --> 統(tǒng)計(jì)為c
- 標(biāo)簽選擇器洋访、偽類(lèi)選擇器 --> 統(tǒng)計(jì)為d

• 先比較a值的大小镣陕，a值大的則優(yōu)先級(jí)高;如果a值相等，則再比較b值的大小姻政，b值大的優(yōu)先級(jí)高呆抑；如果b值相等，則比較c值的大小扶歪，c值大的優(yōu)先級(jí)高理肺；如果c值相等，則比較d值的大小善镰，d值大的優(yōu)先級(jí)高妹萨；

選擇器                                               統(tǒng)計(jì)值                     
style="color: red"                                 a=1, 0, 0, 0                   
#id {}                                             0, b=1, 0, 0    
#id #aid                                           0,b= 2, 0, 0    
.sty {}                                            0, 0, c=1, 0    
.sty p[title=""] {}                                0, 0, c=2, 0    
p:hover {}                                         0, 0,c= 1, 0    
p {}                                               0, 0, 0,d= 1    
ul::after {}                                       0, 0, 0, d=1    
div p {}                                           0, 0, 0,d= 2

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

• 在 CSS 定義中乎完，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的品洛。
• 在 CSS 定義中树姨，a:active 必須被置于 a:hover 之后(如果沒(méi)有a:hover則必須被置于 a:link 和 a:visited 之后)摩桶，才是有效的。

正確的順序?yàn)閍:link帽揪、a:visited硝清、a:hover、a:active (其中转晰，link和visited可以互換)

原因：

• 當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上芦拿，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover,這三個(gè)選擇器,被寫(xiě)在最后的選擇器會(huì)覆蓋掉之前的選擇器，要想實(shí)現(xiàn)“a:hover”的效果查邢，需要將a:hover置于 a:link 和 a:visited 之后蔗崎。
• 當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover和a:active扰藕，這四個(gè)選擇器,被寫(xiě)在最后的選擇器會(huì)覆蓋掉之前的選擇器缓苛，因此要想實(shí)現(xiàn)“a:active”的效果，需要將a:active置于a:link,a:visited,a:hover 之后邓深。

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

#header{ } /*id選擇器未桥，匹配id="header"的元素*/ 
.header{ } /*類(lèi)選擇器，匹配class="header"的元素*/
.header .logo{ } /*后代選擇器庐完，匹配class="header"元素的后代元素中class="logo"的元素*/
.header.mobile{ } /*類(lèi)選擇器钢属，匹配class="header mobile"的元素*/
.header p, .header h3{ } /*多元素選擇器徘熔，匹配class="header"元素的后代p元素和后代h3元素*/ 
#header .nav>li{ } /*多元素選擇器门躯，匹配id="header"元素的后代class="nav"元素的直接后代li元素*/ 
#header a:hover{ } /*偽類(lèi)選擇器，匹配id="header"元素的后代a元素鼠標(biāo)懸浮在其表面時(shí)的樣式*/

• 列出你知道的偽類(lèi)選擇器：

• div:first-child和div:first-of-type的作用和區(qū)別：

  • div:first-child：父元素的第一個(gè)子元素且必須符合指定類(lèi)型（為div）
  • div:first-of-type：匹配的是其父元素下相同類(lèi)型子元素中的第一個(gè)，不一定只有一個(gè)子元素串前，而是在父元素下不同標(biāo)簽的第一個(gè)子元素瘫里；

• 運(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>

結(jié)果

分析：

1. .item1:first-child ：class為item1的元素為 <p class="item1">aa</p>谨读、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>坛吁，父元素為<div class="ct">劳殖，該div的第一個(gè)子元素為<p class="item1">aa</p>铐尚，因此aa為紅色

2. .item1:first-of-type ：class為item1的元素為<p class="item1">aa</p>、<h3 class="item1">bb</h3>哆姻、<h3 class="item1">ccc</h3>宣增，父元素為<div class="ct">，該div的第一個(gè)<p>子元素為<p class="item1">aa</p>矛缨，所以aa背景藍(lán)色统舀，該div的第一個(gè)<h3>子元素為<h3 class="item1">bb</h3>，所以bb背景藍(lán)色劳景，而<h3 class="item1">ccc</h3>為該div的第二個(gè)<h3>子元素誉简，非同類(lèi)第一個(gè)元素，因此ccc沒(méi)有背景藍(lán)色盟广。