nth of type與nth child的區別

nth-of-type：

簡單來說nth-of-type會忽略其它標籤的順序而按照標籤自身種類的順序進行篩選，也就是選擇的參照點並不是dom數，而是自身。下面我們結合具體的例子來了解下。

16     

7 這是乙個段落
8 
9 這是乙個段落
10 這是乙個段落
11 這是乙個段落
12 
**效果如下圖所示，文字中的第3個p標籤背景顏色發生改變。
它的屬性就是按照所有型別標籤的所謂整體佇列進行排序篩選，也就是說不論你是h1還是p標籤，使用這個屬性你要遵循在dom樹中的順序來進行操作。
16     

7 這是乙個段落
8 
9 這是乙個段落
10 這是乙個段落
11 這是乙個段落
如圖，第6個標籤的顏色發生改變
 
nth of type與nth child的區別
今天在看bootstrap教程的時候，發現教程上提到了乙個知識點是之前沒有注意過的，那便是nth of type和nth child。這兩個都是css3中的屬性。nth of child 它的屬性就是按照所有型別標籤的所謂整體佇列進行排序篩選，也就是說不論你是h1，span還是p標籤，使用這個屬性你...
nth of type和nth child的區別
nth of type n 選擇器匹配屬於父元素的特定型別的第 n 個子元素的每個元素.nth child n 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。html 這是標題h1 第乙個段落。p 第二個段落。p 第三個段落。p 第四個段落。p 第五個段落。p a css p nth o...
nth of type和nth child的區別
現在我在這個li中加了乙個a 如果你使用 nth child的時候 然後我們使用 li nth of type 2 的時候 因為它選擇的是li標籤的的第二個，只會找到li第二個，不管中間有多少別的內容。第乙個段落。第二個段落。第三個段落。第四個段落。第五個段落。第六個段落。第七個段落。第八個段落。第...