我有以下内容:
<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; }
解决方法
这是一个
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/
并且是计算特异性值的好工具: