首頁 > web前端 > css教學 > 主體

比較CSS3選擇器:nth-child和:nth-of-type之間的差異

巴扎黑
發布: 2017-09-20 09:51:59
原創
1948 人瀏覽過

本篇文章主要介紹了CSS3選擇器:nth-child和:nth-of-type之間的差異,非常具有實用價值,需要的朋友可以參考下

先看一個簡單的實例,首先是HTML部分:


<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>
登入後複製

然後兩個選擇器相對應的CSS程式碼如下:


##

p:nth-child(2) { color: red; }
登入後複製
登入後複製


p:nth-of-type(2) { color: red; }
登入後複製
登入後複製

上面這個範例中,這兩個選擇器所實現的效果是一致的,第二個p標籤的文字變成了紅色:

儘管上面兩個demo的最後效果一致,但是兩個選擇器之間存在差異是必然的。

對於

:nth-child選擇器,在簡單白話文中,意味著選擇一個元素:

1、這是個段落元素

2、這是父標籤的第二個孩子元素

對於

:nth-of-type選擇器,意味著選擇一個元素:

1、選擇父標籤的第二個段落子元素

我們把上面的實例稍作修改,就可以看到這兩個選擇器之間的差異表現了,如下HTML程式碼:


<section>
    <p>我是一个普通的p标签</p>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>
登入後複製

還是與上面範例一致的CSS測試程式碼:


p:nth-child(2) { color: red; }
登入後複製
登入後複製

 


p:nth-of-type(2) { color: red; }
登入後複製
登入後複製

這時候兩個選擇器所渲染的結果就不一樣了。

p:nth-child(2)其渲染的結果不是第二個p標籤文字變紅,而是第一個p標籤,也就是父標籤的第二個子元素。

p:nth-of-type(2)的表現顯得很堅挺,其把希望渲染的第二個p標籤染紅了。

以上是比較CSS3選擇器:nth-child和:nth-of-type之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板