1 class 和 id 的使用場(chǎng)景?
class（類選擇器）可以有多個(gè)相同的class類名，
id（id選擇器）必須是唯一的，只有一個(gè)
class樣式可使用在多個(gè)標(biāo)簽上，用于多個(gè)標(biāo)簽樣式相同或相似。
id用于指定唯一一個(gè)標(biāo)簽的樣式，多用于頁面分塊的塊級(jí)標(biāo)簽上。
<div id="header">
<div id="footer">
2 CSS選擇器常見的有幾種?
常用的有7種
1屬性選擇器
2偽類選擇器
3偽元素選擇器
4通配符選擇器
5ID選擇器
6類選擇器
7標(biāo)簽選擇器
3 選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
3.1 優(yōu)先級(jí)（高——》低）
1 屬性后使用！important，會(huì)覆蓋頁面的任意位置定義的元素樣式。
2 作為style屬性寫在元素上的內(nèi)聯(lián)樣式<h1 style="xxx">
3 id選擇器
4 類選擇器
5 偽類選擇器
6 屬性選擇器
7 標(biāo)簽選擇器
8 通配符選擇器
9 瀏覽器自定義
3.2 復(fù)雜場(chǎng)景怎么計(jì)算的優(yōu)先級(jí)？
（1）默認(rèn)將選擇器劃分成a b c d 四等級(jí)
a
行內(nèi)樣式 <div style="xxx">
b
id選擇器
c
類選擇器、 屬性選擇器、 偽類選擇器
d
標(biāo)簽選擇器、 偽元素選擇器
（2）計(jì)算各等級(jí)的總個(gè)數(shù)，
（3）從a開始作比較。如果a的個(gè)數(shù)最大，則a的權(quán)重高；
如果a中的個(gè)數(shù)相同，再比較b,以此類推。
4 a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
正確順序：
a:link（鼠標(biāo)未點(diǎn)擊狀態(tài)）
a:visited（點(diǎn)擊后狀態(tài)）
a:hover（懸停狀態(tài)）
a:active（鼠標(biāo)點(diǎn)擊并未釋放的狀態(tài)）
原因：
四個(gè)偽類選擇器的優(yōu)先級(jí)相同，考慮到樣式覆蓋，后面樣式會(huì)覆蓋前面的樣式。
5 以下選擇器分別是什么意思?
header{
ID為header 的元素
}
.header{
class為header的元素
}
.header .logo{
class為 header后代中的class為logo的元素
}
.header.mobile{
class是header又是mobile 的元素
}
.header p, .header h3{
class為header的后代標(biāo)簽p的元素和 class為header的后代標(biāo)簽h3的元素
}
header .nav>li{
ID為header的后代class為nav的直接子元素li的元素
}
header a:hover{
ID為header的后代中a標(biāo)簽的元素在鼠標(biāo)懸停的樣式
}
header .logo~p{
ID為header的后代中所有包含class為logo的元素之后所有同級(jí)p元素
}
header input[type="text"]{
ID為header的后代的input標(biāo)簽中type="text" 屬性的元素
}
6 列出你知道的偽類選擇器
E:link 匹配所有未點(diǎn)擊的鏈接
E:hover 鼠標(biāo)懸停在E元素上
E:active 鼠標(biāo)已經(jīng)點(diǎn)擊，還沒有釋放元素
E:visited 鼠標(biāo)已經(jīng)點(diǎn)擊過
E:focus 獲得焦點(diǎn)的元素
E:selection 當(dāng)前元素選中的元素
E:enabled 沒有禁用的元素
E:disabled 已經(jīng)禁用的元素
E:checked 被選中的元素
E:lang(c) lang屬性等于c的元素
E:first-child E的父元素的第一個(gè)子元素
E:last-child E的父元素的最后一個(gè)子元素
E:nth-child（n） E的父元素的第n個(gè)子元素
E:nth-last-child(n) E的父元素的倒數(shù)第n個(gè)子元素
E:first-of-type(n) 匹配父元素下的使用同種標(biāo)簽的第n個(gè)子元素
E:nth-of-type(n) 匹配使用同種標(biāo)簽的元素
補(bǔ)充：n的取值
1,2,3,4.......
奇數(shù)： odd, 2n+1
偶數(shù)： even 2n
可以應(yīng)用于表格中的奇數(shù)行和偶數(shù)行的背景顏色
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
匹配父元素下的第一個(gè)div子元素。不一定是父元素下的第一個(gè)子元素
div :first-child
匹配div元素的所有后代的第一個(gè)子元素。（所有后代是嵌套或子元素等所有）
div :first-of-type
匹配div元素下所有后代同種標(biāo)簽中的第一個(gè)元素
8 運(yùn)行如下代碼，解析下輸出樣式的原因。
圖所示：
如圖樣式：
1 aa為字體顏色為紅色
解析樣式：
因?yàn)轭悶閕tem1包含aa的元素，是.ct父類下的第一個(gè)子元素，所以對(duì)應(yīng)輸出aa字體為紅色
2 aa、bb背景為藍(lán)色
解析樣式：
包含aa和bb，類為item1是.ct下的第一個(gè)p元素和第一個(gè)h3元素，所以aa bb背景為藍(lán)色
