覆盖特定html元素的CSS属性

Question

我有以下内容：

<section class="main_section">
    <article>
    ...
    </article>
</section>

在我的样式表中，我有：

.main_section article {
    background-color:#fff;
    /* ... */
}

文章的风格，我很高兴。现在，对于article的单个实例，我想执行以下操作：

<section class="main_section">
    <article class="special-bg">
    ...
    </article>
</section>

我已定义：

.special-bg {
    background-color: #276a7f;
}

但是课程没有设置背景颜色。似乎html标记article的样式优先，无论样式表中CSS规则的顺序如何。

如何使用样式类覆盖样式化html标记的CSS属性？这是可能吗？还有其他选择吗？

Answer 1

这是一个 CSS specificity 问题。

.main_section article具有比.special-bg选择器更高的特异性值。

就价值而言： Inline Style＆gt; IDs＆gt; Classes, Attributes, and Pseudo-classes＆gt; Element Types and Pseudo-elements，因此这两个CSS选择器的特异性计算将是：

.special-bg

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 0

.main_section article

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 1

11＆gt; 10 =＆gt; .main_section article选择器赢了！

您可以使用以下内容：

.main_section .special-bg {
  /* Styles goes here... */
}

进一步阅读：

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity
• http://cssspecificity.com/

是计算特异性值的好工具：

• http://specificity.keegan.st/

Answer 2

您可以使用此css

.main_section .special-bg{

  background-color: #276a7f !important;

}

Answer 3

请改用：

.main_section .special-bg {
    background-color: #276a7f;
}

请看这个小提琴，例如：http://jsfiddle.net/Ckxsw/

这样的内容会很有用：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

您可以使用!important，如下所示：

.special-bg {
    background-color: #276a7f !important;
}