Question

我想知道以下代码：

<html>
        <head>
        <title>Test HTML</title>
        <link rel="stylesheet" type="text/css" href="test.css">
        </head>
<body>
<table class=foo cellpadding="2" cellspacing="2">
         <tr>
             <td><b>Contingency Table:</b></td>
             <td><table class=bar border="2" align="left">
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
               </table>
             </td>
         </tr>
</table>
</body>
</html>

使用以下CSS：

table {
        border-width: 2px;
        border-spacing: 2px;
        border-style: solid;
        }  

table.bar {
        border-color: red;
        background-color: white;
}

table.bar td {
        background-color: green;
}

table.bar tr {
        background-color: black;
}

table.foo {
        border-color: blue;
        background-color: white;
}

table.foo td {
        border-color: black;
        background-color: yellow;
}

table.foo tr {
        background-color: yellow;
}

问题是，当在表和它的嵌套表中交换类“foo”和“bar”时，td-tags的样式没有正确设置，或者至少不像我预期的那样。当从外部“bar”和内部“foo”更改为外部“foo”和内部“bar”时，颜色会按预期更改，但td元素的颜色除外。我在这里做错了什么，因为表的其他元素正确改变了？

我知道使用table table.foo {...}会有效，但是这需要知道哪个样式应该用于内部/嵌套表，我真的不喜欢这个想法。我希望能够在需要时交换样式，而不是在样式表中包含“继承”...在样式表中指定foo或bar样式的顺序对我来说是不可取的。如果这实际上是常见的HTML / CSS练习，请纠正我。

Answer 1

CSS - 层叠样式表！

简单地说，如果你在表格中切换foo和bar类，你还需要将table.foo css规则移到table.bar类之上。

解释如果bar嵌套在foo中，则css规则table.foo td会同时匹配foo和{{1}中的tds表。因此，在bar规则之后声明table.foo td，table.bar td规则会覆盖table.foo td

Answer 2

xzyfer的推理是正确的。一个简单的解决方法可能是添加

table table.bar td { background-color: green !important; }

假设您的嵌套最多为2个级别，这样可以正常工作，因为它会覆盖所描述的级联效果（即应用的规则不再依赖于定义规则的顺序）。

工作示例：http://jsfiddle.net/RQCQS/

Answer 3

如果你只想要yto影响table foo的直接孩子，你需要一些子选择器。您可能需要查看它们，因为我知道它们可以用作旧浏览器的解决方案。此外，我建议将tbody添加到你的表中，因为firefox自动执行此操作并且它搞砸了我对子选择器的测试：

table.foo > tbody > tr > td {
        border-color: black;
        background-color: yellow;
}

table.bar > tbody > tr > td {
        background-color: green;
}

应该在firefox中运行，你必须测试其他浏览器。您遇到的问题已在其他帖子中解释，但是级联样式表的性质是因为您的代码最初是在table.foo中的任何td由样式table.foo td影响。或者，您必须切换样式的顺序，以便嵌套样式始终覆盖外部表样式。

CSS＆amp;嵌套元素上的覆盖样式仅部分起作用

3 个答案: