2012年5月3日 星期四

CSS 選擇第N個元素

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

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

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

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

首先把圖片背景指定給每個td:
  1. table td{   
  2.       background:url(bg.jpg) center center;   
  3.   }  

然後在特別設定第一個:first-child跟最後一個:last-child的背景位置。
  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開始。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...