1.class 和 id 的使用場景?
class選擇器優(yōu)先級低于id選擇器，通常在需要設置很多元素具有相同的樣式時，給它們設置同樣的class屬性值來使用；id選擇器優(yōu)先級較高，用于需要給一個標簽設置獨立的樣式時使用。
2.常用的CSS選擇器：
基礎選擇器包括：通用選擇器、id選擇器、類選擇器和標簽選擇器。
組合選擇器包括：多元素選擇器、后代選擇器、子元素選擇器、直接相鄰選擇器、普通相鄰選擇器等
屬性選擇器包括：E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
……
偽類選擇器包括：E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
……
偽元素選擇器包括：E::first-line 匹配E元素內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之后插入生成的內容
3.選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？`
優(yōu)先級由高到低排列為：
①在屬性后用！important的優(yōu)先級最高
②作為style屬性寫在元素標簽上的內聯(lián)樣式
③id選擇器
④類選擇器
⑤偽類選擇器
⑥屬性選擇器
⑦標簽選擇器
⑧通配符選擇器
⑨瀏覽器自定義
在復雜場景下，記行內樣式為a；ID 選擇器為b；類、屬性選擇器和偽類選擇器為c；標簽選擇器、偽元素為d。依次比較a、b、c、d的個數(shù)來判斷優(yōu)先級。當優(yōu)先級相同時，寫在后面的樣式會覆蓋前面的樣式。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？
由于寫在后面的樣式會覆蓋前面的樣式，所以需要對這四種狀態(tài)進行邏輯上的分析，特殊性越高的狀態(tài)就越應該放在后面。link和visited狀態(tài)相互矛盾，且特殊級別相同，所以這兩種狀態(tài)的順序誰在前誰在后都可以。而在link和visited狀態(tài)下，都可以觸發(fā)hover和active狀態(tài)，在hover狀態(tài)下又可以觸發(fā)active狀態(tài)，所以這四個選擇器的順序應該是：a:link, a:visited，a:hover, a:active。
5.下面選擇器的含義：
#header{ /* id選擇器，選擇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的后代中，class為nav的直接子元素中的li標簽*/
}
#header a:hover{ /*為id為header的后代的a標簽在鼠標停留在上面指定樣式*/
}
#header .logo~p{ /*選擇id為header的后代中class為logo的元素之后的同級元素中的p標簽*/
}
#header input[type="text"]{ /*選擇*id為header的后代的input標簽中，type屬性值為"text"的元素*/
}
6.常用的偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
div:first-child和div:first-of-type的作用和區(qū)別
div:first-child 匹配父元素中第一個子元素且類型為divdiv:first-of-type 匹配父元素的子元素中所有div元素中的第一個
7.如下代碼輸出的樣式？
<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;}匹配父元素的第一個子元素且class值為item1的元素，即下面的p標簽中的aa，使其樣式為紅色。.item1:first-of-type{background: blue;}匹配父元素的子元素中每一類的第一個class值為item的元素，即p標簽中的aa和第一個h3標簽中的bb，使其背景為藍色。
