Question

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

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根据特异性规则覆盖另一个，并且它通常被认为是草率编码。

Answer 2

这一行：

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

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

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

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

Answer 3

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

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

Answer 4

更改

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

到

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

也有效。

Answer 5

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

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

Answer 6

那是因为ID具有更高的特异性作为类

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

6 个答案: