html - 覆盖表格的默认 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;
}