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

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特异性.选择器的权重是根据构成的组件来评估的,id权重为100,class权重为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.具有较高特异性的规则优先于具有较低特异性的规则.

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

• 粉碎杂志文章
• W3C规范的特异性
• 特异性计算器

关于使用!重要,正如其他人所建议的那样:

有人可能会想要使用!important关键字对其进行排序,但这很少是一个好主意:

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

阅读特异性可能需要花费几分钟时间,但是当您掌握它时,花费的时间非常值得.