javascript - 通过分配类更改表 td 边框颜色

Question

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

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 操作停止工作。

有人知道这是怎么回事吗？

Answer 1

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

尝试将您的 CSS 更改为:

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

您可以阅读 w3.org 的计算特异性规则 here .如果您打算使用 CSS 进行任何严肃的 Web 开发，那么了解它是如何工作的是很好的。

---

CSS 特性的快速介绍

一般来说，您需要了解以下内容:

• 元素名称(标签名称如 li 和 td)具有最低的特异性...
• ... 后跟类和属性(如 [name=firstname])...
• ... 后跟 ID(如 #div1)...
• ...具有最高特异性的内联 style="..." 属性。

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

当然，您可以通过在 CSS 中使用 !important 来提高性能，但这真的不应该使用，除非在特殊情况下(例如，您想要使用 class= "red" 为红色，无论你在哪里使用它)。否则，您会发现自己在整个 CSS 中大量使用它，其中一个 !important 根据特定规则覆盖另一个，并且它通常被认为是草率的编码。