Question

<table id="tab">
    <thead><tr><td>hhh</td><td>hhh</td></tr></thead>
    <tbody><tr><td>aaa</td><td>aaa</td></tr></tbody>
    <tfoot class="foot"><tr class="foot"><td class="foot">fff</td><td>fff</td></tr></tfoot>
</table>

#tab tr td {
    border: solid 2px green;
}

.foot {
    border: solid 2px red !important;
}

为什么我的<tfoot>边框颜色不会覆盖<tbody>边框颜色？我还希望将<tfoot>红色的边框颜色设置为。

直播示例： http://jsfiddle.net/S8tUW/1/

Answer 1

这样写：

.foot tr td{
    border: solid 2px red !important;
}

#tab tbody tr td{
    border-bottom:0;
}

检查此http://jsfiddle.net/sandeep/S8tUW/19/

Answer 2

啊，是的。在边界崩溃时确定哪些边框样式适用的规则有点复杂。我知道CSS: The Definitive Guide by Eric Meyer有最好的解释。

为了使<tfoot>中的单元格的顶部边框变为红色，您实际上需要删除<tbody>中表格单元格的底部边框样式：

#tab tr td {
    border: solid 2px green;
}

#tab tfoot tr td {
    border-color: red;
}

#tab tbody tr td {
    border-bottom-style: none;
}

（见http://jsfiddle.net/pauldwaite/S8tUW/28/）

Answer 3

这是因为选择者的特异性。

选择器#tab tr td比.foot更具体。

将您的选择器更改为.foot tr td，它应该符合您的要求。

Demo here

Answer 4

jsFiddle默认（恼人地）使用normalize.css，其行为违反直觉 - 增加选择器特异性不会使边界“获胜”。

我建议使用border-collapse: separate;（在jsFiddle中禁用“规范化CSS”），以这样的方式对CSS进行编码，使得唯一的相邻边框具有相同的样式（即“重复”），然后恢复为“边界崩溃：崩溃;`摆脱那些。（这实际上是Paul D. Waite的解决方案，我现在必须应用于我的工作代码。我想出的这个问题的解决方案是{{3这是过于冗长的，可以通过折叠缩短。）

Answer 5

绿色边框应用于单元格，但红色边框应用于该部分（tfoot）。如果您将样式从.foot更改为.foot td，则效果会更好。

为什么我的边框颜色不会覆盖我的边框颜色？

5 个答案: