3

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

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

有谁知道发生了什么？

4

6 回答 6

10

这是 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，则第二种样式将胜出，因为更多的标签名称使其更具体。

当然，您可以通过!important在 CSS 中使用来提高效果，但除非在特殊情况下（例如，class="red"无论在哪里使用，都希望某个东西用红色着色），否则真的不应该使用它。否则，您会发现自己在整个 CSS 中疯狂地使用它，其中!important一个会根据特定性规则覆盖另一个，并且无论如何它通常被认为是草率的编码。

于 2012-08-01T13:20:13.180 回答
1

这一行：

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

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

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

#div1 .colorborder{border:1px solid Red}
于 2012-08-01T13:21:23.877 回答
1

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

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

于 2012-08-01T13:21:32.520 回答
0

改变

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

到

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

也可以。

于 2012-08-01T13:21:10.060 回答
0

您的问题出在 CSS 中，我认为不在 jQuery 中。

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

于 2012-08-01T13:21:20.513 回答
0

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

于 2012-08-01T13:24:21.413 回答