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

先看一個簡單的實例，首先是HTML部分：

我是第1個p標簽

我是第2個p標簽

然后兩個選擇器相對應的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代碼：

我是一個普通的p標簽

我是第1個p標簽

我是第2個p標簽

還是與上面例子一致的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標簽染紅了。

總結

以上是生活随笔為你收集整理的html相同标签nth,比较CSS3选择器:nth-child和:nth-of-type之间的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。