css選擇器nth-child與nth-of-type的區別
阿新 • • 發佈:2018-12-16
例項
例項1
選擇屬於父元素div的第三個子元素span,以及屬於父元素div的第六個子元素span。
<style>
span:nth-child(3){
color: #ff0000;
}
span:nth-child(6){
color: #3333ff;
}
</style>
<div>
<p>第一個p元素</p>
<p>第二個p元素</p>
<span>行內元素1</span>
<p> 第三個P元素</p>
<p>第四個P元素</p>
<span>行內元素2</span>
<p>第五個p元素</p>
<span>最後一個span元素</span>
</div>
執行效果如下: 通過執行效果可以看出,屬於其父元素的第三個子元素的span元素為藍色,屬於其父元素的第六個子元素的span元素為紅色。
例項2
如果我想要選中屬於其父元素的第三個子元素的p元素呢,有符合條件的p元素嗎?
<style>
p:nth-child(3) {
color: #ff0000;
}
</style>
<div>
<p>第一個p元素</p>
<p>第二個p元素</p>
<span>行內元素1</span>
<p>第三個P元素</p>
<p>第四個P元素</p>
<span>行內元素2</span>
<p>第五個p元素</p>
<span>最後一個span元素</span >
</div>
執行效果如下: 上面給出的樣式是想將屬於父元素div的第三個子元素p變成紅色,但是,div的第三個子元素是span。所以並沒有符合條件的p元素存在,當然也不會有對應的效果了。
例項3
選擇屬於其父元素div的第三個p元素,以及屬於其父元素div的第一個span元素。
<style>
body{
background-color: #cccccc;
}
p:nth-of-type(3){
color: #ff0000;
}
span:nth-of-type(1){
color: #3333ff;
}
</style>
<div>
<p>第一個p元素</p>
<p>第二個p元素</p>
<span>行內元素1</span>
<p>第三個P元素</p>
<p>第四個P元素</p>
<span>行內元素2</span>
<p>第五個p元素</p>
<span>最後一個span元素</span>
</div>
執行效果如下: 由上圖可以看出,nth-of-type是根據型別來選擇的,碰到同一型別就+1。
例項4
選擇屬於父元素div的第四個子元素p,以及選擇屬於父元素的第四個p元素。
<style>
body{
background-color: #cccccc;
}
p:nth-child(4){
color: #ff0000;
}
p:nth-of-type(4){
color: #3333ff;
}
</style>
<div>
<p>第一個p元素</p>
<p>第二個p元素</p>
<span>行內元素1</span>
<p>第三個P元素</p>
<p>第四個P元素</p>
<span>行內元素2</span>
<p>第五個p元素</p>
<span>最後一個span元素</span>
</div>
效果如下所示:
總結
nth-chid :根據個數來計算 nth-of-type :根據型別來計算