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？我试过添加！重要，但它没有用。我还尝试为每个“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中添加td后的td

试试这个：

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

覆盖表的默认CSS

2 个答案: