为什么样式应用于 <td> 覆盖应用于其父级的样式 <tr> ？

Question

我正在尝试通过使用CSS样式表：

tr:nth-child(odd) {background-color: black;}

td:nth-of-type(even) {background-color: green;}

但是我想问为什么td:nth-of-type(even)比tr:nth-child(odd)更强大？ 必须同时接收这两种风格的细胞总是绿色的，为什么？

Answer 1

td元素位于tr元素的顶部。 这里没有特殊问题，只是堆叠顺序。 对于其他任何嵌套元素，您也会看到相同的问题：

<div class="a"><div class="b">Foo</div></div>

.a {
  background: black;
}

.b {
  background: green;
}

Answer 2

这与“强度”无关，因为td是DOM树中tr的子元素，并且任何覆盖父元素的样式都将应用于子元素：

根据W3C HTML DOM标准，HTML文档中的所有内容都是一个节点：

整个文档是一个文档节点每个HTML元素都是一个元素节点HTML元素中的文本是文本节点每个HTML属性都是一个属性节点注释是注释节点这意味着如果你为它提供了一个样式（你做了），然后将评估并渲染该样式（或规则）。

有关更多信息，请看以下内容：

http://www.w3schools.com/htmldom/dom_nodes.asp

Answer 3

tr：nth-child（odd）{background-color：black;}

td：nth-of-type（even）{background-color：green;}

因为在CSS中你已经在td中应用了一个样式。 这是最后一条规则。 因此，只要有冲突，最后一条规则中的内容基本上就会覆盖前一条规则。

所以，如果你想要你的风格在tr。 切换那些线。 然后您可以实现自己想要做的。

Answer 4

1）单元格为绿色。

2）行是黑色的。

在您的示例中，绿色单元格的每一行与黑色行完全重叠。

我希望为<td>分配边距也会显示底层的黑色。

还尝试在（奇数）规则后添加“td”：

tr:nth-child(odd) td {background-color: black;}

Answer 5

~~当我风格时，我认为它是最接近我造型的东西的风格。~~

让我尝试在这里赎回自己。 我上面的陈述的意思是，我通常让类选择器驱动我的大多数样式。 在我想要覆盖内联的极少数情况下，因为内联样式ALONG WITH类选择器具有特异性。 因此，该内联元素选择器与我正在设计的东西“更近”。

另外，当我写我的.css文件时，我记住文件越往下，它就越接近我正在造型的东西。 我基于CSS特殊性：您应该了解的文章中的声明8。

当选择器的特异性值相等时，最新的规则才是最重要的规则。