1、class 和 id 的使用場景?
class 匹配class包含特定類的元素，
比如說頁面有些元素有共同的特征。如果有個別不一樣的
那么再加一個class屬性。
如果是獨(dú)一無二的那么我們就起名為id
2、CSS選擇器常見的有幾種?
1、基礎(chǔ)選擇器
2、組合選擇器
3、屬性選擇器
4、偽類選擇器
5、偽元素選擇器
3、選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級？
id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 > 標(biāo)簽選擇器 > 通配符選擇器
對于復(fù)雜場景
行內(nèi)樣式 用 a表示
id選擇器用 b 表示
類選擇器，偽類選擇器，屬性選擇器 用 b表示
標(biāo)簽選擇器用 d 表示
有哪一個選擇器我們就在對應(yīng)的上面加1。
比如 #test p.class1 和 #test .class1.class2
這兩個比較 ，首先b的值是都為1 ，那么我們就繼續(xù)往下比較 明顯后者的c為2 而前者的c僅為1
所以，后者的優(yōu)先級高于前者。
4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link a:visited a:hover a:active
a:visited 如果寫在后面的話，會把a(bǔ):hover a: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標(biāo)簽和所有h3標(biāo)簽元素 加上同樣的樣式
#header .nav>li { }
選擇id為header下class為nav的直接子元素里li標(biāo)簽
#header a:hover { }
選擇id為header下的鏈接，給其在懸停狀態(tài)添加樣式
#header .logo~p { }
選擇id為header下,匹配class為logo之后的同級p標(biāo)簽。
#header input[type="text"] { }
選擇id為header下input標(biāo)簽類型為text的元素
6、 列出你知道的偽類選擇器
- E:first-child
- E:link
- E:hover
- E:visited
- E:active
- E:checked
- E::selected
- E:fist-of-type
- E:nth-of-type(2)
- E:enabled
- E:disabled
- E:focus
7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
8、運(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>
首先.item1:first-child { color: red; }通過觀察發(fā)現(xiàn).item1的父元素為同一個class為ct的div元素，這個父元素下的第一個元素是p標(biāo)簽，同時class為item1,所以就會把a(bǔ)a變成紅色；
之后.item1:first-of-type{ background: blue; } 首先 <p class="item1">aa</p>的父元素為class為ct的div元素，這個父元素下是p表簽的只有一個，同時class也為item1
所以aa的背景色變成了藍(lán)色。接著再看 <h3 class="item1">bb</h3>的父元素為class為ct的div元素，這個父元素下是h3標(biāo)簽的有兩個，我們?nèi)〉谝籬3標(biāo)簽，而這個h3的標(biāo)簽的clas正好是item1，所以bb的背景色為藍(lán)色。最后一個<h3 class="item1">ccc</h3>的父元素同上，這個父元素下h3標(biāo)簽，有兩個，取第一個，而這個h3的標(biāo)簽正好是item1，所以bb的背景色為藍(lán)色。結(jié)果就是aa,bb的背景色為藍(lán)色。
