|
當我想要完美的使用:nth-child或者:nth-of-type的時候有點兒頭暈。你越理解它們，就能寫出越好的CSS規(guī)則！
在這些簡單的”秘方”(實際上是表達式)中我將重復的使用一個簡單的列表并隨即選擇數(shù)字。但是很明顯很容易改變它們以獲得類似的選擇器。
只選擇第五個元素
li:nth-child(5){
color: green;
}
要選擇第一個元素，你可以使用:first-child，或者我相信你也可以改下上面的例子來實現(xiàn)。
選擇除了前面的五個之外的所有元素
li:nth-child(n+6){
color: green;
}
如果有超過10個元素，它將會選中超過5個。
只選擇前面的5個
li:nth-child(-n+5){
color: green;
}
從開始的那個，選擇每第四個
li:nth-child(4n-7) {
/* or 4n+1 */
color: green;
}
選擇奇數(shù)或者偶數(shù)
li:nth-child(odd){
color: green;
}
li:nth-child(even){
color: green;
}
當然這里也有另外兩種實現(xiàn)，你懂的——神飛
選擇最后一個元素
li:last-child {
color: green;
}
選擇倒數(shù)第二個
li:nth-last-child(2){
color: green;
}
從這個例子可看出，上面那個例子也有第二種實現(xiàn)方法。
瀏覽器支持
有趣的是，:first-child 和:last-child被IE 7支持，但是知道IE9才支持剩下的選擇器。如果你擔心IE，可以使用Selectivizr。如果你瀏覽器兼容性對你很重要，請關注When can I use…
嗯，使用CSS3選擇器是件很有趣的事情，像做簡單的數(shù)學題一樣。
譯自：Useful :nth-child Recipies
中文：有用的:nth-child秘方
本文鏈接：http://www.95time.cn/tech/web/2011/8496.asp 
出處：前端觀察
責任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
