今天在看bootstrap教程的時候，發現教程上提到了乙個知識點是之前沒有注意過的，那便是nth-of-type和nth-child。這兩個都是css3中的屬性。
nth-of-child：
它的屬性就是按照所有型別標籤的所謂整體佇列進行排序篩選，也就是說不論你是h1，span還是p標籤，使用這個屬性你要遵循在dom樹中的順序來進行操作。詳情請看下文：
這是鍛若
這是鍛若
這是span
這是span
這是span
這是鍛若
下面我們再來深入**下nth-of-type和它與nth-child的區別。
簡單來說nth-of-type會忽略其它標籤的順序而安裝標籤自身種類的順序進行篩選，也就是選擇的參照點並不是dom數，而是自身。下面我們結合兩個具體的例子來了解下。
這是鍛若
這是鍛若
這是span
這是span
這是span
這是鍛若
這個也不難理解就是按照型別來計算，碰到乙個同型別就加1，那你肯定會說既然如此那有什麼好說的，關鍵如果像下面這樣呢，如下：
.item:nth-of-type這是鍛若
這是鍛若
這是span
這是span
這是span
這是鍛若
這是鍛若
這是鍛若
nth of type與nth child的區別
nth of type 簡單來說nth of type會忽略其它標籤的順序而按照標籤自身種類的順序進行篩選，也就是選擇的參照點並不是dom數，而是自身。下面我們結合具體的例子來了解下。16 7 這是乙個段落 8 9 這是乙個段落 10 這是乙個段落 11 這是乙個段落 12 效果如下圖所示，文字中的...
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第二個，不管中間有多少別的內容。第乙個段落。第二個段落。第三個段落。第四個段落。第五個段落。第六個段落。第七個段落。第八個段落。第...