通过指定类来改变表格单元格的边框颜色

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}
​

“table, tr, td” 是一个 CSS 样式，被项目中所有页面共用的 CSS 文件所引用。但是，在这个特定页面中，我不想要黑色边框，因此我想添加样式“#div1 table, #div1 td”（注意指定“border:none”的效果相同）。然而，添加这个样式会导致 jQuery 操作停止工作。有人知道发生了什么吗？

- Lala

Answer 1

这是一个与CSS的特异性相关的问题。如果您使用浏览器的DOM调试器，您将看到样式#div1 td优先于.colorborder。这是因为ID比类更具体。

尝试修改您的CSS如下：

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

您可以在此处阅读w3.org关于计算特异性的规则。如果您要进行CSS的正式Web开发，理解这个工作原理非常重要。

---

CSS特异性的快速介绍

一般来说，您需要知道以下内容：

• 元素名称（如li和td）具有最低的特异性...
• ...其次是类和属性（如[name=firstname]）...
• ...其次是ID（如#div1）...
• ... 特异性最高的是内联的style="..."属性。

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

当然，您可以通过在CSS中使用!important来提高特异性，但除非特殊情况下（例如，您希望具有class="red"的内容无论在哪里使用都会被着为红色），否则不应该这样使用。否则，您会发现自己在CSS中大量使用它，并根据特异性规则覆盖一个!important另一个，这通常被认为是编写不良的代码。

- Blazemonger

Answer 2

这一行：

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

通过元素的ID（#）引用，使其层次结构高于任何其他普通类规则。

为了使其他规则起作用，您需要将ID选择器添加到它们中，以便它们可以覆盖先前规则的层次结构。

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

- Rodik

Answer 3

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

现在请检查：http://jsfiddle.net/RZ7UP/12/

- nicosantangelo

Answer 4

更改

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

为

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

也可以正常工作。

- amiregelz

Answer 5

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

你的CSS最后一行是... #div1 table.colorborder, #div1 td.colorborder{border:1px solid red} 原因是#div1是一个ID选择器，无论你在页面下方有没有.colorborder{...}，它都会具有更高的优先级...

- Val

Answer 6

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

- Struppi