通过指定类更改表格td边框颜色

change table td border color by assigning class

本文关键字：表格 td 边框 颜色      更新时间：2023-09-26

我想在单击按钮时更改表格某些部分的边框颜色。这是一个更大的项目，但我已经能够在这里重现问题-

http://jsfiddle.net/RZ7UP/8/

CSS：

table, tr, td
{
    border:1px solid #999;
    padding:8px;
    border-collapse: collapse;
    background-color: #FFF;
}
/*comment this line out and it works*/
#div1 table, #div1 td { border-color:White;}
.colorborder{border:1px solid Red}
​

css样式"table，tr，td"位于项目中所有页面使用的css文件中。然而，对于这个特定的页面，我不想要黑色边框，这就是为什么我想添加样式"#div1 table，#div1 td"（注意，指定"border:none"具有相同的效果）。然而，添加它会使jquery操作停止工作。

有人知道发生了什么事吗？

这是css的特殊性问题如果您使用浏览器的DOM调试器，您将看到样式#div1 td优先于.colorborder。发生这种情况是因为ID比类更具体。

尝试将CSS更改为：

#div1 td.colorborder{border:1px solid Red}

​您可以在这里阅读w3.org的计算特殊性规则。如果你打算用CSS进行任何严肃的网络开发，了解它是如何工作的是很好的。

CSS特异性快速介绍

一般来说，以下是您需要了解的内容：

  • 元素名称（标签名称，如li和td）的特异性最低
  • 。。。然后是类和属性（如[name=firstname]）
  • 。。。然后是ID（如#div1）
  • 。。。其中最高的特异性属于内联CCD_ 7属性

此外，上述情况的多个实例具有更高的特异性。因此，如果一个样式被分配给table td，另一个样式分配给table tbody tr td，那么第二个样式将胜出，因为更多的标签名称使其更具体。

当然，您可以通过在CSS中使用!important来提升级别，但除非在特殊情况下（例如，无论在哪里使用class="red"，您都希望其颜色为红色），否则不应该使用此功能。否则，你会发现自己在整个CSS中都在使用它，根据特定规则，一个!important覆盖另一个，而且它通常被认为是草率的编码。

此行：

#div1 table, #div1 td { border-color:White;}

由元素的ID（#）引用，这使它的层次结构比任何其他普通类规则都要高。

为了让其他规则发挥作用，您需要向它们添加ID选择器，以便它们可以覆盖上一个规则的层次结构。

#div1 .colorborder{border:1px solid Red}

您有一个特异性问题，这意味着具有白色的选择器比红色的选择器具有更高的特异性。

立即检查：http://jsfiddle.net/RZ7UP/12/

你的问题在CSS中，我认为不是在jQuery中。

css的最后一行带有。。。#div1 table.colorborder, #div1 td.colorborder{border:1px solid red}原因是#div1 ID选择器将具有更高的优先级，无论您是否将.colorborder{...}放在页面下方。。。

这是因为ID与类具有更高的特异性

更改

#div1 table, #div1 td { border-color:White;}

至

table#div1, td#div1 { border-color:White;}

同样有效。

相关文章：