幾個常用不易混淆的選擇器就簡單介紹一下,就不再贅述了:
- 通配選擇器:*(獲取所有標籤);
- 類型選擇器:如div、p;
- class選擇器:class,可以允許多個元素使用同一個class名;
- id選擇器:id,每個id名只能允許一個元素使用;
- 羣組選擇器:如div,p(中間用逗號隔開,表示選擇所有div元素和所有p元素);
- 包含選擇器:如div p(中間用空格隔開,表示選擇div元素內部的所有p元素)。
常用選擇器的優先級:
通配選擇器 < 類型選擇器 < class < id < 行間樣式
以下是會用到但又經常混淆的選擇器:
第一組:div>p 和div+p的區別
共用的HTML代碼:
<div class="box1">
<p class="main">
我是box1下的p元素(box1的第一層子元素)
</p>
<div>
<p class="main">我是box1的div元素下的p元素(box1的第二層子元素)</p>
</div>
<p class="main">我是緊接在box1下的p元素(box1的第一層子元素)</p>
</div>
<p class="main">我是緊接在box1後的p元素(box1的第一層子元素)</p>
<p class="main">我是緊接在box1後的p元素(box1的第一層子元素)</p>
div>p: 表示選擇父元素爲div元素的所有p元素。
CSS代碼:
.box1>.main { color: dodgerblue; }
頁面效果:
div+p:表示選擇緊接在div元素之後的所有p元素。
CSS代碼:
.box1+.main { color: dodgerblue; }
頁面效果:
第二組:nth-child和nth-of-type的區別
共用的HTML代碼:
<section>
<div>我是一個普通的div標籤</div>
<p>我是第1個p標籤</p>
<p>我是第2個p標籤</p> <!-- 希望這個變紅 -->
</section>
p:nth-child(2):選擇屬於其父元素的第二個子元素的每個 p元素。
CSS代碼:
p:nth-child(2) { color: lightpink; }
頁面效果:
p:nth-of-type(2):選擇屬於其父元素第二個 p 元素的每個 p 元素。
CSS代碼:
p:nth-of-type(2) { color: lightpink; }
頁面效果: