nth-child和nth-of-type是比較常用的乙個偽類選擇器，過去一直沒在意這個，今天發現原來他們之間還有這樣的區別，記錄一下。我們首先來看mdn上對它們的解釋：
:nth-child(an+b) 這個 css 偽類首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，選擇的結果為css偽類:nth-child括號中表示式（an+b）匹配到的元素集合（n=0，1，2，3...）:nth-of-type(an+b) 這個 css 偽類是針對具有一組兄弟節點的標籤, 用 n 來篩選出在一組兄弟節點的位置。從上面的描述似乎不容易看出區別，我們用例子來說明：
這是html結構，下面的css均是以這個html為基礎
>
>
我是1號divdiv
>
>
我是2號divdiv
>
>
我是3號divdiv
>
>
我是1號pp
>
>
我是2號pp
>
>
我是3號pp
>
section
>
>
>
我是1號spanspan
>
>
我是2號spanspan
>
div>
第乙個例子：
效果圖1
從上圖可以看出他們都很好的選中了對應的元素，這裡還看不出他們有什麼區別。好的，我們再看第二個例子：
效果圖2
咦？為什麼第二個p標籤沒有變色？為什麼nth-child不起作用但是nth-of-type卻可以呢？這裡我們就需要理解這兩者的原理了。瀏覽器在生成css渲染樹的時候，對於選擇器的處理是從右到左的（關於原因可以看我的筆記）。那麼對於section p:nth-child(2)，首先瀏覽器會在dom樹中尋找所有子元素，將他們一一排序，然後再找到其中的第二個元素，找到第二個元素後，再選擇其中的p標籤。最後再檢視父級元素是不是section元素。我們現在來看看html結構，發現子元素有p標籤、div標籤、span標籤（這裡不考慮body標籤和html標籤），好的，給他們一一編號，注意這個編號是在同乙個父級元素裡面的子元素之間進行，這樣我們可以知道第乙個p標籤其實是4號。也就是說nth-child(2)選中的元素有div和span，沒有p標籤。所以p:nth-child(2)自然就得不到結果了。所以樣式不起作用。那麼nth-of-type怎麼就可以選中呢？這是因為nth-of-type的編號比nth-child多了乙個限制條件，那就是它編號的是同類標籤。也就是說，找到dom樹中的子元素後，先按照同類標籤分類，再對每類標籤從1開始編號，這樣編號結果其實就和標籤裡面的數字編號一致了。因此就可以得到上面的結果啦。
為了更好的體現出nth-child的特性，再舉幾個例子：
:nth-child(2)
大家說這個效果是什麼呢？效果是這樣的：
效果圖3
是不是嚇一跳？怎麼全變藍呢？其實根據上面的分析，我們可以發現body是html的第二個子元素，知道這一點就不奇怪了。
再看下面這個：
可以看到所有2號元素都變藍了。表示選中了所有同類元素裡面的第二個元素。
以上。
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第二個，不管中間有多少別的內容。第乙個段落。第二個段落。第三個段落。第四個段落。第五個段落。第六個段落。第七個段落。第八個段落。第...
nth child 學習筆記
ul li nth child 3n 3 上面這段 如何工作的呢.括號中引數 可以接收兩個關鍵字,even odd even 表示只選擇 偶數字的元素 第2 4 6 8 10.項元素 odd 表示只選擇 奇數字的元素 第1 3 5 7 9.項元素 也可以接收乙個表示式 最簡單的表示式 僅有乙個數字 ...