這次給大家帶來選取器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中文網其它相關文章!
推薦閱讀:
css3的pointer-events使用詳解
focus-within的使用詳解