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個子元素。