Question

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

#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设置为padding-bottom: 10px。
但在某个特殊场合，我希望特定的td在所有方向都有padding: 10px，我在#particular-td中设置了这一点。

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

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

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

Answer 1

因为CSS Specificity。选择器的权重是根据构成的组件来评估的，id的权重为100，class es的权重为10，element选择器的权重为1。

所以在你的例子中：

table#id-form td

加权为102（table#id为101且td为1），而这是：

#particular-td

加权为100.如果你改变第二个：

#id-form #particular-td

您将获得200的权重，它将覆盖前一个选择器。只作为最后的手段，你应该使用!important，因为这几乎可以防止你进一步覆盖它。

Answer 2

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

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

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

有人可能会尝试使用!important关键字对此进行排序，但这不是一个好主意：

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

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

Answer 3

你有两种方法，要么在填充特定的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如果我能避免的话。

Answer 4

试试这段代码，我已经为你的css添加了！important，在这种模式下可以覆盖表#id-from td的填充

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

CSS规则如何覆盖另一个CSS规则？

4 个答案: