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元素的 top 上。这里没有特殊问题，只是堆叠顺序。你会看到任何其他嵌套元素的相同问题：

http://cssdeck.com/labs/moa13oth

<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（偶数）{background-color：green;}

因为在你的CSS中你已经在td中应用了一个样式。这是最后一条规则。所以基本上，最后一条规则中的内容将覆盖以前的规则，只要它们发生冲突。

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

Answer 4

1）细胞是绿色的。

2）行是黑色的。

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

我希望将保证金分配给＆lt; td＆gt;还会显示底层的黑色。

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

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

Answer 5

~~当我选择风格时，我认为它是最接近我造型胜利的风格。~~

让我试着在这里赎回自己。我在上面的陈述中的含义是，我通常让班级选择器驱动我的大部分造型。在我想要覆盖内联的极少数情况下，因为内联样式ALONG WITH类选择器具有特异性。因此，内联元素选择器“更接近”我正在造型的东西。

另外，当我写我的.css文件时，我记住文件越往下，它就越接近我正在造型的东西。我的基础是CSS Specificity: Things You Should Know文章中的陈述8。

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

为什么应用于覆盖样式的样式应用于其父级？

5 个答案: