覆盖特定html元素的CSS属性

我有以下内容：

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

在我的样式表中,我有：

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

这篇文章的风格,我很高兴.现在,对于单个文章实例,我想要执行以下操作：

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

我已经定义了：

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

但是课程没有设置背景颜色.似乎html标签文章的样式优先,无论样式表中CSS规则的顺序如何.

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

解决方法

这是一个 CSS specificity问题.

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

在价值方面：
内联样式> ID> <类,属性和伪类>元素类型和伪元素,因此这两个CSS选择器的特异性计算将是： .特别-BG

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

.main_section文章

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

11> 10 => .main_section文章选择器获胜！

您可以使用以下内容：

.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/