CSS常見選擇器的類別
- 有①通用選擇器②標(biāo)簽選擇器③id選擇器④類選擇器⑤屬性選擇器 ⑥分組選擇器(多元素) ⑦派生選擇器(后代)⑧子元素選擇器 ⑨偽類選擇器
選擇器的優(yōu)先級
- 針對性越強(qiáng)則其優(yōu)先級就越高;內(nèi)聯(lián)樣式>id選擇器>偽類選擇器>屬性選擇器>類選擇器>元素選擇器>通用選擇器.
class 和 id 的使用場景
- class有普遍性一般在內(nèi)部用來定義部分有共同特性的元素的樣式雳窟；id是唯一的祝懂，一般用于外部劃分區(qū)塊粉寞。
使用CSS選擇器時(shí)命名空間的劃定
- 在html中，部分標(biāo)簽如p萄窜、li等使用頻繁，如果沒有劃分區(qū)塊劃定命名空間撒桨，在選取時(shí)就會導(dǎo)致混亂查刻，一個選擇器可能會選取到所有的元素，我們就沒辦法針對部分元素修改其樣式凤类；劃定命名空間后穗泵，就有針對性。
CSS選擇器示例
#header{}
.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}
#header .nav>li{}
#header a:hover{}
- #header 選擇id為header的元素
- .header 選擇class為header的元素
- .header .logo 選擇header這個類下的屬于logo這個類的元素
- .header.mobile 選擇同時(shí)標(biāo)記有header和mobile這兩個類的元素
- .header p, .header h3 選擇header這個類下的p元素和h3元素
- #header .nav>li 選擇header這個id下的標(biāo)記有nav類的第一代li元素
- #header a:hover 選擇header這個id下的a元素谜疤，修改鼠標(biāo)懸停在上面時(shí)的樣式
常見偽類選擇器
:hover 鼠標(biāo)懸停時(shí)的樣式佃延；
:active鼠標(biāo)按下保持的樣式；
:focus在輸入框選中時(shí)的樣式茎截；
E:first child 選擇E元素苇侵，且該E元素是第一子元素；
E:first-of-type 選擇E元素企锌，且該E元素是同類標(biāo)簽的第一個榆浓。
:first-child和:first-of-type的區(qū)別
- E:first child 選擇E元素，且該E元素是第一子元素撕攒，在一個父元素下有多個同類子元素的情況下可以用其選擇第一個子元素陡鹃；
- E:first-of-type 選擇E元素，且該E元素是同類型標(biāo)簽的第一個抖坪；在一個區(qū)塊內(nèi)有多個同類型標(biāo)簽的情況下用來選擇其中的第一個萍鲸；
選擇器及樣式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
.item1:first-of-type{
background: red;
}
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">111</div>
<div class="ct">
<p class="item1">222</p>
<div class="item1">333</div>
<div class="item1">444</div>
<div class="item2">
<div class="item1">555</div>
<div class="item1">666</div>
</div>
</div>
</body>
</html>
- 輸出紅色背景解析：111是body下兩個div類型的第一個；222是標(biāo)記ct類這個div下的p類型的第一個擦俐；333是標(biāo)記ct類這個div下的div類型的第一個脊阴；555是標(biāo)記item2類這個div下的div類型的第一個。
- 輸出藍(lán)色字體解析：111是body父元素下第一個div子元素；222是標(biāo)記ct類這個div父元素下的第一個p子元素嘿期；555是標(biāo)記item2類這個div父元素下第一個div子元素品擎。
text-align: center的作用解析
- 作用在塊級元素上，讓塊級元素里面的行內(nèi)元素水平居中备徐。
屬性兼容性的查詢
- 在caniuse.com輸入屬性名稱查詢
