class 和 id 的使用場(chǎng)景?
id選擇器富腊，使用id="name"定義坏逢，使用#name調(diào)用來設(shè)置此id的css，其優(yōu)先級(jí)高于類選擇器赘被，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次是整，常常用于建立派生選擇器；
class類選擇器民假，使用.name定義浮入，使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上羊异，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)事秀；
CSS選擇器常見的有幾種?
| 通用選擇器 | *{} |
|---|---|
| 類選擇器 | .class{} |
| id選擇器 | #id{} |
| 標(biāo)簽選擇器 | element{} |
| 偽類選擇器 | a:hover{} |
| 偽元素選擇器 | a::before{} |
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
!important為樣式設(shè)置最高權(quán)限 > 元素標(biāo)簽上的內(nèi)聯(lián)樣式 > id選擇器#id > 類選擇器.class > 偽類選擇器a:hover > 屬性選擇器 > 標(biāo)簽選擇器p a h1 > 通配符選擇器* > 瀏覽器自定義
同級(jí)選擇器野舶，后寫的會(huì)覆蓋之前寫的樣式
a:link, a:hover, a:active, a:visited 的順序是怎樣的易迹？ 為什么？
a:link（未被點(diǎn)擊）
a:visited（已被點(diǎn)擊）
a:hover（鼠標(biāo)懸停其上）
a:active（鼠標(biāo)已經(jīng)按下平道，還沒有釋放）
*visited寫在active后面睹欲，當(dāng)a標(biāo)簽被點(diǎn)擊之后，visited的樣式會(huì)覆蓋其他樣式一屋，導(dǎo)致其他樣式都不生效
以下選擇器分別是什么意思?
#header{ id為header的選擇器
}
.header{ class為header的選擇器
}
.header .logo{ header類中后代名為logo的類選擇器
}
.header.mobile{ 類名同時(shí)含有header和mobile的選擇器
}
.header p, .header h3{ header類中的后代p標(biāo)簽選擇器 和header類中的后代h3標(biāo)簽選擇器
}
#header .nav>li{ id為header的選擇器中的后代nav類的直接子元素li標(biāo)簽
}
#header a:hover{id為header的選擇器中的后代a在hover狀態(tài)下的樣式
}
#header .logo~p{ id為header的選擇器中后代名為logo類之后同級(jí)的p標(biāo)簽
}
#header input[type="text"]{ id為header的選擇器中屬性為type="text"的input標(biāo)簽
}
列出你知道的偽類選擇器：
| --- | --- |
|---|---|
| E:first-child | 匹配元素E的第一個(gè)子元素 |
| E:nth-child | 匹配元素E的第n個(gè)子元素 |
| E:enabled和E:disabled | 匹配元素E的狀態(tài)為可用/不可用 |
| E:checked和E:selection | 匹配元素E的狀態(tài)為單選框選中/復(fù)選框選中 |
| a:link | 未被點(diǎn)擊的鏈接 |
| a:visited | 已被點(diǎn)擊的鏈接 |
| a:hover | 鼠標(biāo)懸停其上的鏈接 |
| a:active | 鼠標(biāo)已經(jīng)按下窘疮，但沒有釋放的鏈接 |
div:first-child、div:first-of-type陆淀、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child：匹配作為長(zhǎng)子（第一個(gè)子元素）的div
div:first-of-type：匹配父級(jí)元素中第一個(gè)div子元素
div :first-child：匹配每個(gè)父元素為div元素的第一個(gè)子元素
div :first-of-type: 在父元素為div的后代元素中尋找不同類型的第一個(gè)標(biāo)簽
運(yùn)行如下代碼考余，解析下輸出樣式的原因。
<style>
.item1:first-child{? 選取作為父元素第一個(gè)子元素的class為item1的元素
color: red;
}
.item1:first-of-type{ 選取作為父元素第一個(gè)出現(xiàn)的各類class為item1的元素轧苫，aa所在的p元素第一次出現(xiàn)楚堤，bb所在的h3元素第一次出現(xiàn)疫蔓，都被選中，cc所在的h3在bb后面身冬，因?yàn)閔3標(biāo)簽出現(xiàn)過一次衅胀，所以不再被選中。
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
