10

我对 CSS 不是很好，我需要一些帮助。

我有一张桌子，我希望每隔一行都是灰色的，而交替的行是白色的。但我只希望它发生在一张特定的桌子上。

我在我的 CSS 中添加了一些代码： 

tr:nth-child(even) {  
background: #CCC;  
}  

tr:nth-child(odd) {  
background: #FFF;  
}

但问题是它影响了我网站上的每张桌子。我还没有找到任何仅适用于某个类的示例。那可能吗？我希望它仅适用于：

table.dashboardtable
4

3 回答 3

11

像往常一样使用 CSS 后代组合器（并列）：

table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
于 2009-10-15T01:09:59.530 回答
2

nth-child并nth-of-type接受odd和even以及像an+b, wherea和b是常数的公式。

通常你想使用nth-of-type，它只适用于你指定的类型。这将省略其他元素。如果您希望每个甚至 tr 都具有该背景颜色，请尝试：

tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}

有关 CSS 选择器的更多信息

于 2009-10-15T01:12:22.440 回答
2

希望这是有道理的。

<!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
      #customers tr:nth-child(even){
        background-color:white;
      }
      #customers tr:nth-child(odd){
        background-color:Lavender;
      }
    </style>
  </head>

  <body>
    <p>In your markup define your table:</p>
      <table id="customers"></table>
  </body>
</html>
于 2012-05-16T22:22:14.553 回答