覆盖特定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的特殊性问题。

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

按价值计算： Inline Style> IDs> Classes, Attributes, and Pseudo-classes>
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 > 10=> .main_section article选择器获胜！

您可以使用以下内容：

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