CSS3:nth-child(n)與nth-child(2n+1)中n的區別。
阿新 • • 發佈：2019-01-25
<html> <head></head> <body> <ul> <li>索引為0，為父元素ul的第一個元素。</li> <li>索引為1，為父元素ul的第二個元素。</li> <li>索引為2，為父元素ul的第三個元素。</li> <li>索引為3，為父元素ul的第四個元素。</li> <li>索引為4，為父元素ul的第五個元素。</li> <li>索引為5，為父元素ul的第六個元素。</li> <li>索引為6，為父元素ul的第七個元素。</li> <li>索引為7，為父元素ul的第八個元素。</li> <li>索引為8，為父元素ul的第九個元素。</li> <li>索引為9，為父元素ul的第十個元素。</li> </ul> <script type="text/JavaScript" src="../publicJQuery/jquery-2.1.4.js"></script> <script type="text/JavaScript"> $("li:nth-child(3)").css("background","red"); $("li:nth-child(3n+1)").css("border","2px solid black"); </script> </body> </html>
上訴程式碼執行之後的效果為：
w3c中的解釋為：nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的型別。
也就是說()裡面最終計算出來的是父元素下的第N個子元素，那麼如此，對於nth-child(n)裡面的n，可以直接理解為第N個子元素；對於nth-child(3n+1)裡面的n則可以理解為是從0開始的索引，最終的結果為父元素下的第1，4，7，10個子元素。