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在所有方向上都有10px的padding，我在#particular-td中设置了它。

显然，我把CSS样式按顺序放在外部文件中。
但渲染后的CSS只有padding-bottom，padding: 10px貌似被覆盖了!?

请解释：
这是如何发生的？为什么会这样？
为解决这个问题，我应该如何安排这些规则（除了使用内联样式）？

- Pulkit Mittal

---

CSS 不是我的强项，不过，如果你想让那个特定的 CSS 元素有一个内边距，为什么不把它放在元素本身的“style”中呢？这肯定会覆盖所有其他样式。 - ATaylor

@ATaylor 在线CSS不是一个可管理的解决方案。 - chrisfrancis27

请参阅 CSS3 选择器：9. 计算选择器的特异性。 - Zeta

你不需要在#id-form之前使用table元素选择器，因为页面上只能有一个带有#id-form的元素，而额外的选择器会稍微减慢速度。只是以后参考一下！ :) - chrisfrancis27

修改了CSS，还是不起作用。 - Pulkit Mittal

Answer 1

由于CSS 优先级的原因。选择器的权重基于组成它的部分进行评估，id的权重为100，class的权重为10，元素选择器的权重为1。

所以在您的示例中：

table#id-form td

这个权重值为102（table#id的权重为101，而td的权重为1），而这个：

#particular-td

权重为100。如果您将第二个更改为以下内容：

#id-form #particular-td

您将得到一个权重为200，它将覆盖先前的选择器。只有在最后一步才应该使用 !important，因为这会几乎完全阻止您在后续代码中对其进行覆盖。

- chrisfrancis27

---

谢谢兄弟。非常感谢。之前理解这些东西对我来说很痛苦！ - Pulkit Mittal

补充一点：内联CSS始终具有“最高权重”，除非您使用!important。 - Rockbot

Answer 2

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

以下是了解其工作原理的一些资源：

• Smashing Magazine文章
• W3C特异性规范
• 特异性计算器

关于使用 !important，如其他人所建议的： 有人可能会想使用!important关键字来解决这个问题，但这很少是一个好主意：

1. 它变得难以维护/调试
2. 它破坏了CSS的正常流程
3. 该规则无法被后面的其他规则覆盖

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

- Christofer Eliasson

---

+1 鼓励进一步阅读 - 在我理解特异性之前，我曾经花费了无数个小时摔头思考为什么它不像我期望的那样“级联”。 - chrisfrancis27

特异性计算器加一。 - Chloe

如果你被 !important 的代码缠住了，需要注意的是，一种覆盖 !important 属性的方法是使用其他具有更高特异性的 !important 属性当包含它们的规则集具有更高的特异性时。但是不要真的这样做！ - misterManSam

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，我不太喜欢它。

- CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Answer 4

试试这段代码，我已经在你的CSS中添加了!important，在这种模式下可以覆盖table#id-form td的padding。

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

- Alessandro Minoccheri

---

这个在IE上也能用吗？我听说这会在IE上出现一些问题？ - Pulkit Mittal

在这里使用!important并不是正确的方法，那应该是最后的解决方案。 - Christofer Eliasson

我同意Christofer的观点，此外我正在尝试了解这种覆盖的原因，因为无论如何，最终我都可以采用内联样式。 - Pulkit Mittal