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

我被利用试图风格表CSS：为什么应用于覆盖样式的样式应用于其父代<tr>？

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

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

但我问为什么td:nth-of-type(even)比tr:nth-child(odd)强？必须收到两种样式的单元格始终为绿色，为什么？

来源

2013-10-09 clement

哪个规则首先出现？后来的规则优先，其他条件相同。 – fred02138

@fred，即使我颠倒规则，这也是一样的结果！ – clement

这不是“实力”的问题，这是因为td是在DOM树和任何tr一个子元素重写父样式应用到子元素：

根据W3C HTML DOM标准，一切HTML文档中是一个节点：

整个文档是一个文档节点的每个HTML元素是元素节点的HTML元素中的文本是文本节点的每个HTML 属性是属性节点注释是注释节点这是什么意味着，如果你提供的风格吧（你做了），然后风格（或规则）将被评估和渲染。

来源

2013-10-09 20:46:49 jrd1

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

http://cssdeck.com/labs/moa13oth

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

.a { 
    background: black; 
} 

.b { 
    background: green; 
}

来源

2013-10-09 20:46:42 cimmanon

-2

~~当我的风格，我认为它是最接近我的造型胜事物的风格。~~

让我试着在这里赎回自己。我上面说的意思是，我通常让我的选择器驱动我的大部分样式。在罕见的情况下，我想重写这个内联，然后由于内联样式与类选择器需要特异性。因此，内联元素选择器与我正在设计的东西“接近”。另外，当我编写我的.css文件时，我记住，文件越远，它就越接近我所设计的东西。我将其基于CSS Specificity: Things You Should Know文章的声明8。

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

来源

2013-10-09 20:48:47

TR：第n个孩子（奇数）{背景色：黑色;}

TD：第n的式（偶数）{背景色：绿色;}

因为在你在CSS中应用了一个样式。这是最后一个规则。所以基本上什么是最后的规则将覆盖以前的规则，只要他们冲突。

所以如果你想要你的风格在tr被遵循。切换这些线路。然后你可以达到你想要做的。

来源

2013-10-10 03:01:15 Johneric

1）细胞是绿色的。

2）行是黑色的。

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

我预计给<td>分配边距也会显示底层的黑色。

也可以尝试（奇数）规则之后加入 “TD”：

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

来源

2013-10-10 13:09:43 Seavel

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

回答

相关问题

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