通过分配类来更改表格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样式 “表，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;}

到

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

工作过。

Answer 3

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

与你的CSS的

最后一行... #div1 table.colorborder, #div1 td.colorborder{border:1px solid red} 原因是是#div1如果你有.colorborder{...}进一步下跌的页面ID选择将更高的优先级，无论...

Answer 4

这条线：

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

被元素的ID（＃）引用，这使得它的层次高于其他任何普通类规则。

为了让其他规则可以正常工作，您需要为它们添加ID选择器，以便它们可以覆盖先前的规则的层次结构。

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

Answer 5

你有一个specificity问题，这意味着具有白色选择具有比红色更专一。

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

Answer 6

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