1.class 和 id 的使用場景?

• class用于主區(qū)塊里面的詳細(xì)內(nèi)容，同一個(gè)class可以重復(fù)出現(xiàn)，一個(gè)標(biāo)簽可以有幾個(gè)不同的class。
• id多使用于主要塊級元素，同一個(gè)id一個(gè)頁面中只能出現(xiàn)一次，有些獨(dú)一無二元素也可用id。

2.CSS常見選擇器

• 通配符選擇器（＊）
• id選擇器（#ID）
• 類選擇器（.className）
• 元素選擇器(E)
• 后代選擇器（Ｅ Ｆ）
• 子元素選擇器(E>F)
• 相鄰兄弟元素選擇器(E + F)
• 兄弟元素選擇器(E ~ F)
• 群組選擇器（selector1,selector2,...,selectorN）
• 屬性選擇器（E[attr]）更多屬性選擇器
• 偽類選擇器（E:hover）更多偽類選擇器
• nth選擇器(E:nth-child(an + b)) 更多相關(guān)知識(shí)
• 偽元素選擇器（E::before）更多偽元素選擇器

3.選擇器的優(yōu)先級問題

• css選擇器優(yōu)先級是根據(jù)權(quán)重計(jì)算的。
  • ID選擇器權(quán)值為100
  • 類選擇器、屬性選擇器、偽類選擇器權(quán)值為10
  • 標(biāo)簽選擇器、偽元素選擇器權(quán)值為1
  • 相應(yīng)的權(quán)值相加即可，最后根據(jù)結(jié)果排出優(yōu)先級
• 除權(quán)重外還有些其他規(guī)則。
  • 行內(nèi)樣式 》 內(nèi)部樣式表 》外部樣式表
  • 權(quán)值相同的，后定義的優(yōu)先級較高
  • 樣式值含有！important，優(yōu)先級最高

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

• 順序?yàn)閍:link > a:visited > a:hover > a:active
• 原因：
  • 鼠標(biāo)經(jīng)過的“未訪問鏈接”同時(shí)擁有a:link、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義；
  • 鼠標(biāo)經(jīng)過的“已訪問鏈接”同時(shí)擁有a:visited、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義；
  • a:active是鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件，并擁有鼠標(biāo)懸停a:hover屬性；
  • 由于偽類的選擇器優(yōu)先級一致，后面的a鏈接樣式會(huì)覆蓋前面的。
  • 所以: a:link > a:visited > a:hover > a:active。

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

<pre>

1. 選擇ID為header的元素

header{

}

2. 選擇class為header的元素
   .header{
   }
3. 選擇class為header的元素的后代元素中class為logo的元素
   .header .logo{
   }
4. 選擇同時(shí)有header和mobile兩個(gè)class的元素
   .header.mobile{
   }
5. 選擇class為header的元素的后代元素中的p元素和h3元素
   .header p, .header h3{
   }
6. 選擇class為header的元素的后代元素中class為nav的元素的子元素中的li元素

header .nav>li{

}

7. 選擇class為header的元素的后代元素中a元素的hover偽類

header a:hover{

}

8. 選擇class為header的元素的后代元素中的class為logo的元素的所有它后面的兄弟元素中為p的元素

header .logo~p{

}

9. 選擇class為header的元素的后代元素中的所有input元素中type屬性為text的元素

header input[type="text"]{

}
</pre>

6. 偽類選擇器有哪些

• :active、:foucs、:hover、:link、:visted、:first-child、:lang

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

• div:first-child：如果div是它父元素的第一個(gè)子元素則匹配，否則不能匹配
• div:first-of-type：匹配div的父元素下的第一個(gè)div元素
• div :first-child：匹配div元素的后代中的第一個(gè)元素
• div :first-of-type：匹配div元素的后代中所有出現(xiàn)的第一種元素

8. 解析代碼：

<pre>
<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>
</pre>

• 因?yàn)閏lass為item1的元素的父元素下的第一個(gè)元素的class為item1，所以這個(gè)元素被選中，aa的顏色變?yōu)榧t色。
• 因?yàn)閏lass為item1的父元素下有兩種元素，所以這兩種元素中的第一個(gè)出現(xiàn)的元素被選中，所以aa和bb所在的元素的背景色變?yōu)樗{(lán)色。