覆盖表格的默认 CSS

Question

我正在 Zetaboards 论坛软件内的网页上制作表格。当我尝试为每一行创建交替的背景颜色时，论坛的默认 CSS 会介入。

我的 HTML：

<table class="stats">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

我的 CSS：

table.stats tbody tr:nth-child(even) {
  background-color: #333;
}
table.stats tbody tr {
  background-color: #232;
}

上面的工作就像我在 cssdeck.com 中想要的那样。但是，当我在我的论坛网页上移动它时，论坛“td”css 会接管。

论坛CSS：

td {
  background-image: ...;
  background-color: ...; 
  background-position: ...;
  ...
}

如何覆盖论坛的默认 CSS？ 我尝试添加！important，但它没有用。我还尝试为每个“tr”添加一个类，并在我的 css 中添加 tr.class。那也没用。

我确实可以控制我论坛的主题 CSS。但我无法改变它，因为“td”风格在整个论坛设计中被广泛使用。我也不想在我的 HTML 中为每个 td 添加一个类...

感谢您的帮助，感谢您的宝贵时间！

Answer 1

表格单元格包含在表格行中。当您将背景颜色应用于行和单元格时（如上例所示），单元格背景颜色将覆盖行的背景颜色。

解决方法：将此规则添加到撤消应用于表格单元格的论坛样式：

table.stats td {
    background: transparent none;
}

并在行上应用背景颜色（即原始示例中没有变化）：

table.stats tbody tr:nth-child(even) {
    background-color: #333;
}
table.stats tbody tr {
    background-color: #232;
}

Answer 2

1.)你必须在你的css中的tr之后添加td

试试这个：

 <style>
     table.stats tbody tr td:nth-child(even) { 
      background-color: #333 !important ;
    } 
    table.stats tbody tr td{ 
      background-color: #232 !important ;
    } 
</style>