覆盖表的默认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.）您必须在cs中的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>