這次帶給大家選擇器nth-child和:nth-of-type的使用詳解，使用選擇器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標籤染紅了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是選擇器nth-child和:nth-of-type的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
