html - 你怎么能有一个带有继承类的标签？

Question

我正在使用纯 CSS，制作表格。我希望突出显示表格中的每个奇数行以使其更易于阅读。但我希望不同的桌子有不同的颜色。

看起来这应该有效：

CSS 文件：

.redtable.odd {background-color:red;}
.yellowtable.odd {background-color: yellow;}

HTML 文件：

<table class="redtable">
  <tr class="odd"><td>row</td><td>1</td></tr>
  <tr><td>row</td><td>2</td></tr>
  <tr class="odd"><td>row</td><td>3</td></tr>
</table>

<table class="yellowtable">
  <tr class="odd"><td>row</td><td>1</td></tr>
  <tr><td>row</td><td>2</td></tr>
  <tr class="odd"><td>row</td><td>3</td></tr>
</table>

但是<tr>标签似乎不知道它们属于 classredtable或yellowtable. “CSS”的“C”不应该意味着“级联”吗？这些嵌套标签不应该继承类吗？

（我真的不想将显式类添加到每个<tr>. 真正的表有数百行长。）

JSFiddle 链接：https ://jsfiddle.net/tr0moyo0/

谢谢。

标签： htmlcss

Answer 1

这里真正的解决方案是根本不使用 CSS 类。您可以非常简单地完成此操作：

table:nth-child(even) r:nth-child(odd) {
  background-color: red;
}
table:nth-child(odd) r:nth-child(odd) {
  background-color: blue;
}