1.class 和 id 的使用場景?

• id：id在一個(gè)頁面中是全局唯一的，一個(gè)標(biāo)簽只能有一個(gè)id，多用于塊級標(biāo)簽。使用"#"選擇
• class：class在一個(gè)頁面可以有多個(gè)，一個(gè)標(biāo)簽可以有多個(gè)class，多用于多個(gè)標(biāo)簽樣式相似或相同時(shí)。使用"."來選擇

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

• 基礎(chǔ)選擇器

Paste_Image.png

• 組合選擇器

Paste_Image.png

• 屬性選擇器

Paste_Image.png

• 偽類選擇器

Paste_Image.png

• 偽元素選擇器

Paste_Image.png

• E:first-child 匹配一個(gè)元素為E且該E元素為老大哥

<style>
.poi>.item1:first-child{
  color: red;
}
  
.item3:first-child{
  color: blue;
}

</style>
 <div class="ct">
   <h3 class="item3">aa</p>
   <h3 class="item2">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
 <div class="aw">
   <h3 class="item1">aa</p>
   <h3 class="item2">bb</h3>
   <h3 class="item3">ccc</h3>
 </div>
 <div class="aw">
    <div class="poi">
     <h3 class="item1">aa</p>
     <h3 class="item2">bb</h3>
     <h3 class="item3">ccc</h3>
     </div>
 </div>

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

3.1 優(yōu)先級：

1. ！important
2. 內(nèi)聯(lián)樣式
3. id
4. class
5. 偽類
6. 屬性
7. 元素
8. 偽元素
9. 瀏覽器自定義

3.2 復(fù)雜場景

a：內(nèi)聯(lián)樣式
b：id
c： class、屬性、偽類
d： 元素、偽元素

比較方法：a>b>c>d，當(dāng)優(yōu)先級相同時(shí)，計(jì)算同一級的個(gè)數(shù)，個(gè)數(shù)多的優(yōu)先級大

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

1. a:link
2. a:visited
3. a:hover
4. a:active

原因：

1. 首先優(yōu)先級相同時(shí)，后定義的覆蓋前面定義的
2. 靜態(tài)在前，動(dòng)態(tài)在后，所以link和visited在前，hove和active在后
3. 根據(jù)動(dòng)作的先后順序，所以link在visited前，hover在active之前。

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

#header{ 
//選擇id=header       
}
.header{
//選擇class=header 
}
.header .logo{
//選擇class=header中后代為class=logo
}
.header.mobile{
//選擇class=header mobile
}
.header p, .header h3{
//選擇class=header中后代元素為p和h3
}
#header .nav>li{
//選擇id=header中后代為nav的li子元素
}
#header a:hover{
//選擇id=header中后代鼠標(biāo)懸停的a元素
}
#header .logo~p{
//選擇id=header中后代id=logo之后的同級p元素
}
#header input[type="text"]{
//選擇id=header中后代具有type屬性為“text”的input元素
}

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

• E:first-child
• E:link
• E:visited
• E:active
• E:hover
• E:focus
• E:lang(c)
• E:enabled
• E:disabled
• E:checked
• E:selection

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

• first-child：匹配其父元素的第一個(gè)子元素
• first-of-type：匹配其父元素下的不同類型的第一個(gè)子元素

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

<style>
.item1:first-child{
  color: red;
//匹配class="ct"中的<p class="item1">
}
.item1:first-of-type{
  background: blue;
//匹配class="ct"的 <p class="item1">和<h3 class="item1">
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>