Javascript 为什么我的<；tfoot>；边框颜色不覆盖我的<；t车身>；边框颜色？ 嗯嗯 AAAAA ffffff #tab tr td{ 边框：实心2倍绿色； } .英尺{ 边框：实心2件红色！重要； }

为什么我的

边框颜色不覆盖

边框颜色？我还想将边框顶部颜色设置为红色

活生生的例子：

这样写：

<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

）。如果将样式从

.foot

更改为

.foot td

，效果会更好。

这是因为选择器的特殊性

选择器

#选项卡tr td

比

.foot

更具体

将选择器更改为

.foot tr td

，它应该符合您的要求

---

是的。计算边框塌陷时应用哪些边框样式的规则有点复杂。有我所知道的最好的解释

为了使

中单元格的上边框变为红色，实际上需要删除

中表格单元格的下边框样式：

（请参阅）

jsiddle默认使用normalize.css（令人烦恼），它的行为违反直觉-增加选择器的特异性不会使边界“获胜”

---

我建议使用

边框折叠：分离（在JSFIDLE中禁用“规范化CSS”），以这样一种方式对CSS进行编码，即只有相邻的边框具有相同的样式（即“重复”），然后恢复为“边框折叠：折叠；`以消除这些样式。（这基本上是Paul D.Waite的解决方案，我现在必须将其应用到我的工作代码中。我提出的这个问题的解决方案过于冗长，可以通过折叠缩短。）
@PaulAttuck；check my fiddle Example仍然是绿色而不是绿色red@Kyle：页脚单元格的上边框仍为绿色（在Chrome/Mac中）无论第二个选择器的具体程度如何。然后，您应该将其上方单元格的底部边框也设置为红色。您需要了解CSS的具体程度。第一个规则比第二个规则更具体，因此会覆盖第二个规则。
.foot tr td{
    border: solid 2px red !important;
}

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

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

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

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