为什么我的嵌入样式不优先于我的外部样式表中的样式？答案

【问题标题】：Why isn't my embedded style taking precedence over styles in my external stylesheet?为什么我的嵌入样式不优先于我的外部样式表中的样式？
【发布时间】：2011-03-22 13:24:05
【问题描述】：

我有以下样式表：

/* 我的样式表.css */ .MyForm .MyInput 字段集 { 边框：2px 纯灰色 }

然后是下面的 HTML 代码：

所有字段集都从外部样式表接收 2px 实心灰色边框。我认为嵌套的字段集将从嵌入样式接收 0 边框，因为选择器“.MyInnerFieldSets 字段集”优先于“.MyForm .MyInput 字段集”。我在 Firefox 3.6.8 中对此进行了测试。这是预期的行为还是 Firefox 的问题？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

.MyForm .MyInput fieldset { border: 2px solid grey }

此规则指定了 2 个类，因此它比后一个规则更具体。只需在后一个规则前面加上相同的类名，使其更具体或更具体。

【讨论】：

【解决方案2】：

选择器

.MyForm .MyInput fieldset

比选择器具有更大的特异性（更具体）

.MyInnerFieldsets fieldset

一个更具体的选择器会覆盖一个不太具体的选择器。 Read about specificity and how it's calculated here.

要解决这个问题，请使您的第二个选择器更具体（例如.MyInput .MyInnerFields fieldset），或使第一个选择器不那么具体（.MyInput fieldset）。

【讨论】：

额外建议：这确实是@thomasrutter 的问题，但在添加额外的选择器之前，我实际上会重新考虑为什么首先需要这样做。因为这样做会让你很快陷入 CSS 特异性问题。为什么你需要这么具体？你能不能说得更具体一点？从长远来看，我建议使用像 BEM（或类似的东西）这样的东西来让你的生活更轻松。 getbem.com/introduction
是的，这是一个很好的观点，你很快就会陷入一场特异性战争——这场战争的下一个升级是!important...它变得丑陋了。在这种情况下，使第一个 less 具体可能是另一种选择，因为也许您希望更一般的规则适用于 .myform 中的 any 字段集，然后想要挑出例外——无论如何，有很多方法可以做到这一点，而 CSS 会迫使您考虑自己的结构