2

我正在尝试使用 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)？必须接受两种样式的单元格总是绿色的，为什么？

4

5 回答 5

6

td元素位于元素之上。tr这里没有特异性问题，只是堆叠顺序。您会在任何其他嵌套元素中看到相同的问题：

http://cssdeck.com/labs/moa13oth

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

.a {
  background: black;
}

.b {
  background: green;
}
于 2013-10-09T20:46:42.403 回答
3

这不是“强度”的问题，这是因为它td是 DOM 树中的子元素，tr并且任何覆盖父元素的样式都会应用于子元素：

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

整个文档是一个文档节点 每个 HTML 元素都是一个元素节点 HTML 元素中的文本是文本节点 每个 HTML 属性都是一个属性节点 注释是注释节点 这意味着如果您为其提供了样式（您确实这样做了） ，然后将评估和呈现该样式（或规则）。

欲了解更多信息 - 看看这个：

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

于 2013-10-09T20:46:49.117 回答
0

tr:nth-child(odd) {背景色：黑色；}

td:nth-of-type(even) {背景色：绿色；}

因为在您的 CSS 中，您已在 td. 这是最后一条规则。所以基本上最后一条规则中的内容将覆盖之前的规则，只要它们发生冲突。

因此，如果您希望在 tr 中遵循您的风格。切换这些行。然后你就可以实现你想做的事情。

于 2013-10-10T03:01:15.727 回答
0

1) 单元格为绿色。

2) 行是黑色的。

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

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

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

tr:nth-child(odd) td {background-color: black;}
于 2013-10-10T13:09:43.660 回答
-2

当我设计风格时，我认为它是最接近我正在设计的东西的风格获胜。

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

此外，当我编写 .css 文件时，我记住文件越往下，它就越“接近”我正在设计的东西。我基于CSS Specificity: Things You Should Know文章中的声明 8。

When selectors have an equal specificity value, the latest rule is the one that counts.

于 2013-10-09T20:48:47.423 回答