一、:nth-child選擇器
1.1 用法
- 格式
p:nth-child(2){color：red} - 含義
表示p元素的父類元素的第二個(gè)子元素是p標(biāo)簽，再這樣的前提下，那么它的樣式是：color=red
1.2 代碼
1.2.1 代碼實(shí)例01
選擇父元素是div的第三個(gè)子元素span，以及父元素是div的第六個(gè)子元素span。
- css樣式
<style>
span:nth-child(3){
color: #ff0000;
}
span:nth-child(6){
color: #3333ff;
}
</style>
- html結(jié)構(gòu)
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪05</p>
<span>第三個(gè)span標(biāo)簽</span>
</div>
</body>
- 運(yùn)行效果
圖1-1 運(yùn)行結(jié)果
通過(guò)運(yùn)行效果可以看出，屬于其父元素的第三個(gè)子元素的span元素為藍(lán)色，屬于其父元素的第六個(gè)子元素的span元素為紅色。
1.2.2 代碼實(shí)例02
如果我想要選中屬于其父元素的第三個(gè)子元素的p元素呢，有符合條件的p元素嗎？
- css樣式
<style>
p:nth-child(3){
color: #ff0000;
}
</style>
- html結(jié)構(gòu)
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪05</p>
<span>第三個(gè)span標(biāo)簽</span>
</div>
</body>
-
運(yùn)行效果
圖1-2 運(yùn)行結(jié)果
上面給出的樣式是想將屬于父元素div的第三個(gè)子元素p變成紅色，但是，div的第三個(gè)子元素是span。所以并沒(méi)有符合條件的p元素存在，當(dāng)然也不會(huì)有對(duì)應(yīng)的效果了。
二、:nth-of-type選擇器
2.1 用法
- 格式
p:nth-of-type(2){color:red} - 含義
在p元素的父類元素中，從出現(xiàn)p元素的地方開(kāi)始算起，且只算p元素的個(gè)數(shù)，這樣的前提下，第2個(gè)標(biāo)簽的樣式為color=red。
2.2 代碼
2.2.1 代碼實(shí)例01
選擇屬于其父元素div的第三個(gè)p元素，以及屬于其父元素div的第一個(gè)span元素。
- css樣式
<style>
p:nth-of-type(3){
color: #ff0000;
}
span:nth-of-type(1){
color: #3333ff;
}
</style>
- html結(jié)構(gòu)
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪05</p>
<span>第三個(gè)span標(biāo)簽</span>
</div>
</body>
-
運(yùn)行效果
圖1-3 運(yùn)行結(jié)果
由上圖可以看出，nth-of-type是根據(jù)元素的類型來(lái)選擇的，碰到同一類型就+1。它不取決于只有在父元素的第n個(gè)元素的位置上的時(shí)候，才能達(dá)到效果。
它首先是在其父元素下的該元素的第幾個(gè)，側(cè)重點(diǎn)變了。
2.2.2 代碼實(shí)例02
再來(lái)看看兩者的區(qū)別：
上代碼：
- css樣式
<style>
p:nth-child(4){
color: #ff0000;
}
p:nth-of-type(4){
color: #3333ff;
}
</style>
- html結(jié)構(gòu)
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二個(gè)span標(biāo)簽</span>
<p>墨雨love薏雪05</p>
<span>第三個(gè)span標(biāo)簽</span>
</div>
</body>
- 運(yùn)行效果
圖1-4 運(yùn)行結(jié)果
三、總結(jié)
nth-child ：根據(jù)個(gè)數(shù)來(lái)計(jì)算
nth-of-type ：根據(jù)類型來(lái)計(jì)算
@墨雨出品 必屬精品 如有雷同 純屬巧合
`非學(xué)無(wú)以廣才，非志無(wú)以成學(xué)！`
