CSS !important规则的使用，特异性

Question

CSS !important规则的使用，特异性

3

我正在编写一系列PHP类，用于创建WordPress插件，但也可用于其他任何环境。在单独测试脚本后，一切似乎都很好，但当我为其创建WP插件时，出现了我预见到的CSS冲突。我最初计划使用特异性来解决这些问题，但并不总是可行的。以下是默认的WP主题：

#content tr td {
    border-top: 1px solid #E7E7E7;
    padding: 6px 24px;
}

如果我尝试指定一个td没有填充，则除非我为表格添加ID而不是类，否则它将无效。我看到一些受欢迎的插件在每个CSS属性上实现了!important规则，而不是使用ID进行特异性。哪个更好？我知道!important规则应该谨慎使用，但是为我的表格添加ID似乎违反了语义，因为这个表格有多个相同的ID实例：

文档语言的ID属性允许作者为文档树中的一个元素实例分配标识符。

http://www.w3.org/TR/CSS2/selector.html#id-selectors 编辑：另一个选择可能是用一个具有ID的div来包装所有内容，但是如果存在类似#content #main td的规则，它仍将支配我的#someid td。此外，正如下面讨论的那样，拥有两个共享相同ID的元素是无效的，尽管它可能“起作用”。

- Aram Kocharyan

1

为什么不使用一个 class 呢？假设 #content 是包含你的表格的父元素，那么 #content .mytables tr td 仍然比原始选择器更具体。 - Yi Jiang

是的，那也可以实现，但我不想再增加任何限制，因为PHP类可以与任何PHP环境一起使用，我也不想指定一个特定于WP的#content ID。 - Aram Kocharyan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yi Jiang · Accepted Answer

如我在评论中所说，您可以将#content规则与类一起包含在选择器中，以覆盖原始样式，如果#content是包装元素（应该是这样，因为如果将其添加到所有表元素中，则没有任何方法向WordPress帖子添加多个表格，这将是...奇怪的）。

无论如何，如果您必须选择在多个元素上添加id或在属性上使用!important，我会使用!important，因为虽然!important可能会使您的样式表难以维护，但添加多个id也可能破坏页面上使用的任何JavaScript，并且不能保证所有浏览器中的id选择器实现都能适应具有相同id的多个元素，因此后果更严重。

基本上，要在高度不推荐但有效的做法和无效的未定义行为之间进行选择。