武林網(www.survivalescaperooms.com)文章簡介：當我想要完美的使用:nth-child或者:nth-of-type的時候有點兒頭暈。你越理解它們，就能寫出越好的CSS規則！

譯自：Useful :nth-child Recipies
中文：有用的:nth-child秘方
請尊重版權，轉載請注明來源，多謝！

當我想要完美的使用:nth-child或者:nth-of-type的時候有點兒頭暈。你越理解它們，就能寫出越好的CSS規則！

在這些簡單的”秘方”(實際上是表達式)中我將重復的使用一個簡單的列表并隨即選擇數字。但是很明顯很容易改變它們以獲得類似的選擇器。

123li

要選擇第一個元素，你可以使用:first-child，或者我相信你也可以改下上面的例子來實現。

li

如果有超過10個元素，它將會選中超過5個。

123li

1234li

123li

123li

當然這里也有另外兩種實現，你懂的——神飛

123li

123li

從這個例子可看出，上面那個例子也有第二種實現方法。

有趣的是，:first-child 和:last-child被IE 7支持，但是知道IE9才支持剩下的選擇器。如果你擔心IE，可以使用Selectivizr。如果你瀏覽器兼容性對你很重要，請關注When can I use…

嗯，使用CSS3選擇器是件很有趣的事情，像做簡單的數學題一樣。