11

所以，这就是我正在做的事情：

#id-form td {
padding: 0 0 10px 0;
}

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

我有一张桌子#id-form，我在上面设置了所有td的 s padding-bottom: 10px。
但是在一个特殊的场合，我想要一个特定td的padding: 10px方向，我在#particular-td.

显然，我将 CSS 样式按顺序放在一个外部文件中。
但是渲染的 CSS 只有padding-bottom, 并且padding: 10px似乎被覆盖了！？

请解释：
这是如何发生的以及为什么会发生这种情况？
我应该如何安排这些规则来解决我的问题（内联样式除外）？

'table'编辑：我之前#id-form在表中删除。我从来没有使用过这个，我只是在这里提到它以便能够更好地解释它。

4

4 回答 4

36

因为CSS 特殊性。选择器的权重是根据组成它的组件进行评估的，其中id' 的权重为 100，classes 的权重为 10，element选择器的权重为 1。

所以在你的例子中：

table#id-form td

权重为 102（table#id是 101 和td1），而这个：

#particular-td

权重为 100。如果您将第二个更改为：

#id-form #particular-td

您将获得 200 的权重，这将覆盖之前的选择器。只有在万不得已的情况下才应该使用!important，因为这几乎可以防止您进一步覆盖它。

于 2012-10-08T11:14:20.080 回答
8

这与特异性有关。table#id-form td比 更具体#particular-td。具有较高特异性的规则优先于具有较低特异性的规则。

以下是一些资源，可帮助您开始了解其工作原理：

关于使用 !important，正如其他人所建议的那样：

人们可能很想使用!important关键字来解决这个问题，但这并不是一个好主意：

  1. 维护/故障排除变得很痛苦
  2. 它打破了 CSS 的正常流程
  3. 该规则以后不能被其他规则覆盖

阅读特异性可能需要几分钟，但当你掌握它时，花时间是值得的。

于 2012-10-08T11:12:40.140 回答
2

您有两种方法，要么在填充特定 td 后添加 !important：

padding: 10px !important;

或者，您的选择器更改如下：

table#id-form td#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

两者都很好。如果可以避免，我个人不喜欢使用 !important 。

于 2012-10-08T11:13:46.480 回答
-1

试试这段代码，我已经在你的 CSS 中添加了 !important，在这种模式下可以忽略 table#id-form td 的填充

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px !important;
}
于 2012-10-08T11:11:22.303 回答