1.class和id的使用場景波势？
- 在css中id用"#"表示，class用"."表示拴曲，在一個html中id只能為一個元素套用css樣式凛忿，當(dāng)為多個元素套用css樣式時，dom獲取元素會發(fā)生混淆店溢，而class可以為多個元素套用同一個樣式，簡單來說就是id是一對一的荣回，class是一對多的
2.CSS選擇器常見的有幾種?
基礎(chǔ)選擇器
*通配符選擇器戈咳，為頁面所有元素加上樣式id id選擇器
.class class選擇器
element 標(biāo)簽選擇器組合選擇器
E,F 多元素選擇器，用,分隔删铃，同時匹配元素E或元素F
E F 后代選擇器踏堡，用空格分隔，匹配E元素所有的后代（不只是子元素顷蟆、子元素向下遞歸）元素F
E>F 子元素選擇器，用>分隔阎肝，匹配E元素的所有直接子元素
E+F 直接相鄰選擇器肮街，匹配E元素之后的相鄰的同級元素F
E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）屬性選擇器
E[attr] 匹配所有具有屬性attr的元素沛硅，div[id]就能取到所有有id屬性的div偽類選擇器
E:first-child 匹配作為長子（第一個子女）的元素E
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:focus 匹配獲得當(dāng)前焦點的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級擂红？
!important>內(nèi)聯(lián)樣式>id選擇器>類選擇器>偽類選擇器>屬性選擇器>標(biāo)簽選擇器>通配符選擇器
復(fù)雜場景围小！important權(quán)重為1000，id選擇器權(quán)重為100变秦，類選擇器權(quán)重為10框舔，標(biāo)簽選擇器權(quán)重為1，對于復(fù)雜樣式刘绣，將各選擇器對應(yīng)的權(quán)重相加，權(quán)重高的優(yōu)先
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的饺窿？ 為什么移斩？
- L-V-H-A
- 如果，a:link 寫在 a:hover 之后肠套，依據(jù) CSS 層疊特性猖任，a:link 將覆蓋 a:hover 樣式，鼠標(biāo)移動到a鏈接上時a:hover將不會生效朱躺，這不是我們預(yù)期的效果，所以 a:link 要寫在 a:hover 前
- 如果宇弛，a:link 寫在 a:active 之后源请，同理彻况，a:link 覆蓋了 a:active 樣式舅踪，鼠標(biāo)點擊a鏈接時，a:active 將不會生效悍赢，所以货徙，a:link 要寫在 a:active 前
- 如果，a:hover 寫在 a:active 之后破婆，那么胸囱，a:hover 講覆蓋 a:active 樣式烹笔，要想點擊a鏈接，一定會先經(jīng)過鼠-
標(biāo)移動到a鏈接之上這個步驟谤职，所以，當(dāng)點擊a鏈接時冤吨，a:active 將不會生效饶套，所以，a:hover 要寫在 a:active 前 - 而 a:visited妓蛮，跟 a:link 類似蛤克，它發(fā)生在 a:link 之后，a:hover 和 a:active 之前构挤，它的位置，只能在第二位了
5.以下選擇器分別是什么意思?
}
.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下的所有l(wèi)i元素
}
#header a:hover{ //選中id為header元素下 所有a標(biāo)簽鼠標(biāo)劃過時的狀態(tài)
}
#header .logo~p{ //選中id為header元素下 class為logo元素之后同級的所有p元素
}
#header input[type="text"]{ //選中id為header元素下 <input type="text">的元素
}
div:first-child和div:first-of-type的作用和區(qū)別
- div:first-child匹配div父元素下第一個子元素
- div:first-of-type匹配div父元素下第一個div元素
運行如下代碼版保，解析下輸出樣式的原因彻犁。
.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>
- aa變?yōu)榧t色；aa汞幢，bb背景色變?yōu)樗{色；ccc不變化
