關(guān)于選擇器的那些事兒
1.class 和 ID的使用場(chǎng)景
class 對(duì)應(yīng)具有相同樣式的html元素使用，可重復(fù)使用
id一般像身份證一樣對(duì)于html元素是唯一的锰瘸，一般使用一次盒件，適合在頁面外層布局中使用
2.CSS常見的選擇器
- 1.id選擇器
<style>#box{font-size:20px;}</style>
<div id="box">haha</div>
- 2.class選擇器
<style>.box{font-size:20px;}</style>
<div class="box">haha</div>
- 3.標(biāo)簽選擇器
<style>div{font-size:20px;}</style>
<div class="box">haha</div>
- 4.全部選擇器
<style>*{font-size:20px;}</style>
<div class="box">haha</div>
<div class="box">haha</div>
- 5.派生選擇器 （選擇元素下的子元素）
<style>.box p{font-size:20px;}</style>
<div class="box"><p><p>haha</p></p></div>
<div class="box">haha</div>
- 6.子代選擇器 （選擇元素下直接元素）
<style>.box >p{font-size:20px;}</style>
<div class="box"><p>haha</p></div>
<div class="box">haha</div>
- 7.偽類選擇器 (標(biāo)簽，class后面加偽類)
3.選擇器的優(yōu)先級(jí)和計(jì)算優(yōu)先級(jí)的方式
-- 1.優(yōu)先級(jí)（從高到低排列）
-- 在屬性后面有舱禽！import的元素樣式
-- 作為style寫在元素中的內(nèi)聯(lián)樣式
-- id選擇器
-- class選擇器
-- 標(biāo)簽選擇器
-- 相鄰選擇器
-- 子代選擇器
-- 后代選擇器
-- 統(tǒng)配符選擇器
-- 屬性選擇器
-- 偽類選擇器
-- 2.計(jì)算方式：
行內(nèi)樣式 標(biāo)記為a
id選擇器 標(biāo)記為b
類炒刁，屬性標(biāo)記為c
標(biāo)簽 偽類選擇器標(biāo)記為d
從a到d分別計(jì)算，級(jí)別越高的字母得到的統(tǒng)計(jì)值越高越優(yōu)先誊稚，統(tǒng)計(jì)值相同則向下迭代比較
4.a:link a:hover, a:active,a:visited 的順序應(yīng)該為翔始？
正確順序應(yīng)為：a：link a：visited a:hover a:active
原因： -- 1.當(dāng)選擇器優(yōu)先級(jí)別相同時(shí)罗心，后定義的會(huì)覆蓋先定義的
-- 2.以此類推，當(dāng)鼠標(biāo)經(jīng)過未訪問鏈接城瞎，同時(shí)有l(wèi)ink和hover屬性渤闷，
由于后定義的覆蓋先定義的，所以hover在后面
-- 3.以此類推脖镀，當(dāng)鼠標(biāo)經(jīng)過已訪問鏈接飒箭，同時(shí)有visited和hover屬性，
由于后定義的覆蓋先定義的蜒灰，所以hover在link和visited后面
5.以下例子中的選擇器是什么意思弦蹂？
- .#header{}：匹配Id=header的元素
- header{}:匹配類class=header的元素
- header .logo{}：
匹配類為header元素的后代元素中類為logo的元素 - header.mobile{}：
匹配類名包含header和mobile的元素，如class = 'beader mobile' - header p, .header h3{}：
匹配兩個(gè)類型的元素（并集强窖，‘或’關(guān)系）凸椿，類型1是header類的后代p標(biāo)簽，類型2是header類的后代h3標(biāo)簽 - -#header .nav>li{}：
匹配id為header的后代中翅溺，類名為nav的直接子元素中脑漫，的li標(biāo)簽 - .#header a:hover{}：
匹配id為header的后代a標(biāo)簽在hover狀態(tài)（鼠標(biāo)懸停其上）下的樣式 - .#header .logo~p{}：
匹配id為header的后代中，類名為logo的元素之后的同級(jí)元素中咙崎，的p標(biāo)簽 - .#header input[type="text"]{}
id為header的后代中优幸，input標(biāo)簽中，屬性type的值為"text"的元素集合
6.列出你知道的偽類選擇器
| 選擇器名稱 | 用途 |
|---|---|
| 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)按下叙凡，但沒有釋放的鏈接 |
7.div:first-child和div:first-of-type的作用和區(qū)別
div:first-child：父元素的第一個(gè)子元素且必須符合指定類型（為div）
div:first-of-type：父元素中的第一個(gè)div元素
exp:
<body>
<p>title</p>
<div>haha</div>
<div>hehehe</div>
</body>
div:first-child:為無效
div:first-of-type：指向haha
8.指出下面代碼的效果并解釋
<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>
- 現(xiàn)象解釋
item1:first-child ：.item1的元素為 <p class="item1">aa</p>劈伴、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>握爷，這三個(gè)元素的父元素為<div class="ct">跛璧，第一個(gè)子元素為<p class="item1">aa</p>,所以aa為紅色
.item1:first-of-type：item1的元素為 <p class="item1">aa</p>、<h3 class="item1">bb</h3>新啼、<h3 class="item1">ccc</h3>追城，這三個(gè)元素的父元素為<div class="ct">，首次出現(xiàn)的類型為p和第一個(gè)h3標(biāo)簽燥撞，所以aa和bb背景刷新為藍(lán)色
