nth-child以及nth-of-type

nth-child可以滿足一些獨特的元素選擇上，但是有一個nth-of-type的雙胞弟弟，流浪在外，蠻少見到，寫個代碼驗一下血統。

樣式：

li:nth-child(2){color:red; } li:nth-of-type(2){color:blue; } li:last-of-type{color:lightblue; } li:last-child{color:gray; }

頁面：

<ul><span>start</span><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><span>end</span> </ul>

結果：

看起來，li:nth-child跟名字一樣是選擇父元素下第n個元素， 然后發現是li就生效，如果不是li就“查無此人”，而nth-of-type則不一樣，是先讓所有的li排個隊，然后把第n個找出來(如果確實沒有那就真的無此人了)。

我覺得這個太坑了，就好像一個妖怪說要吃路過的第二個男子，然后放過了第一個男子，第二個來的發現是個女子，妖怪可能不吃這個，等待下一個男子，難道妖怪會覺得這是上天點化他，要他棄惡從善么，從此不再吃人么？？Excuse me？

這個其實從某種意義上來說是nth-of-type更加符合我們心里所期望的結果，而nth-child容易在append元素或者prepend的時候，讓我們的css產生誤差。因此以后還是多用nth-of-type來查找會更加符合心中期望。如果一定要用也可使用ul :nth-child(2)來解決問題。

本妖怪就吃來的第二個，唐僧最好，豬八戒也湊活。

轉載于:https://www.cnblogs.com/mydia/p/6687595.html

總結

以上是生活随笔為你收集整理的nth-child和nth-of-type的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。