CSS常見選擇器的類別
- 有①通用選擇器②標簽選擇器③id選擇器④類選擇器⑤屬性選擇器 ⑥分組選擇器(多元素) ⑦派生選擇器(后代)⑧子元素選擇器 ⑨偽類選擇器
選擇器的優先級
- 針對性越強則其優先級就越高;內聯樣式>id選擇器>偽類選擇器>屬性選擇器>類選擇器>元素選擇器>通用選擇器.
class 和 id 的使用場景
- class有普遍性一般在內部用來定義部分有共同特性的元素的樣式；id是唯一的，一般用于外部劃分區塊。
使用CSS選擇器時命名空間的劃定
- 在html中，部分標簽如p、li等使用頻繁，如果沒有劃分區塊劃定命名空間，在選取時就會導致混亂，一個選擇器可能會選取到所有的元素，我們就沒辦法針對部分元素修改其樣式；劃定命名空間后，就有針對性。
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 選擇同時標記有header和mobile這兩個類的元素
- .header p, .header h3 選擇header這個類下的p元素和h3元素
- #header .nav>li 選擇header這個id下的標記有nav類的第一代li元素
- #header a:hover 選擇header這個id下的a元素，修改鼠標懸停在上面時的樣式
常見偽類選擇器
:hover 鼠標懸停時的樣式；
:active鼠標按下保持的樣式；
:focus在輸入框選中時的樣式；
E:first child 選擇E元素，且該E元素是第一子元素；
E:first-of-type 選擇E元素，且該E元素是同類標簽的第一個。
:first-child和:first-of-type的區別
- E:first child 選擇E元素，且該E元素是第一子元素，在一個父元素下有多個同類子元素的情況下可以用其選擇第一個子元素；
- E:first-of-type 選擇E元素，且該E元素是同類型標簽的第一個；在一個區塊內有多個同類型標簽的情況下用來選擇其中的第一個；
選擇器及樣式示例
<!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是標記ct類這個div下的p類型的第一個；333是標記ct類這個div下的div類型的第一個；555是標記item2類這個div下的div類型的第一個。
- 輸出藍色字體解析：111是body父元素下第一個div子元素；222是標記ct類這個div父元素下的第一個p子元素；555是標記item2類這個div父元素下第一個div子元素。
text-align: center的作用解析
- 作用在塊級元素上，讓塊級元素里面的行內元素水平居中。
屬性兼容性的查詢
- 在caniuse.com輸入屬性名稱查詢
