nth-child以及nth-of-type

nth-child可以滿足一些獨(dú)特的元素選擇上，但是有一個(gè)nth-of-type的雙胞弟弟，流浪在外，蠻少見(jiàn)到，寫(xiě)個(gè)代碼驗(yàn)一下血統(tǒng)。

樣式：

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

頁(yè)面：

<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>

結(jié)果：

看起來(lái)，li:nth-child跟名字一樣是選擇父元素下第n個(gè)元素， 然后發(fā)現(xiàn)是li就生效，如果不是li就“查無(wú)此人”，而nth-of-type則不一樣，是先讓所有的li排個(gè)隊(duì)，然后把第n個(gè)找出來(lái)(如果確實(shí)沒(méi)有那就真的無(wú)此人了)。

我覺(jué)得這個(gè)太坑了，就好像一個(gè)妖怪說(shuō)要吃路過(guò)的第二個(gè)男子，然后放過(guò)了第一個(gè)男子，第二個(gè)來(lái)的發(fā)現(xiàn)是個(gè)女子，妖怪可能不吃這個(gè)，等待下一個(gè)男子，難道妖怪會(huì)覺(jué)得這是上天點(diǎn)化他，要他棄惡從善么，從此不再吃人么？？Excuse me？

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

本妖怪就吃來(lái)的第二個(gè)，唐僧最好，豬八戒也湊活。

轉(zhuǎn)載于:https://www.cnblogs.com/mydia/p/6687595.html

總結(jié)

以上是生活随笔為你收集整理的nth-child和nth-of-type的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。