CSS 選擇第N個元素

在處理表格的時候，有時候我們會希望表格背景變化可以多一點，所以做了一張剛好跟表格一樣寬的背景圖，然後在tr內指定他的背景圖片url，希望可以得到這樣的效果。


可是在chrome裡卻會變成這樣。


原因是chrome內即使指定tr，他還是會再把背景指定給下面的td，於是就會變成這種情況。

要解決這樣的問題，可以使用css的:nth-child屬性去作一下調整。

首先把圖片背景指定給每個td：

view plaincopy to clipboardprint?

1. table td{   
2.       background:url(bg.jpg) center center;   
3.   }  

然後在特別設定第一個:first-child跟最後一個:last-child的背景位置。

view plaincopy to clipboardprint?

1. table td:first-child{   
2.     background:url(bg.jpg) left center;   
3. }   
4. table td:last-child{   
5.     background:url(bg.jpg) right center;   
6. }  

這樣就可以了。

另外要指定第n個元素，可以使用:nth-child(n)，注意n是從1開始，而不是從0開始。