为什么元素样式覆盖在元素上设置的类？

Question

我们的问题是这样的.我们有这样的代码.

<div class="parent">
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 1</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 2</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 3</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 4</a>
    </div>
    <div class="clear">
    </div>
</div>

这都是带有类的全局容器.content.

CSS代码:

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

出于某种原因,.parent a浏览器正在申请,而不是申请.content a.
有什么问题,如何应用容器CSS而不是更接近.parent一个CSS？

Answer 1

这两个规则具有相同的特异性,因此在样式声明中最后一个规则将赢得...你确定.parent a-rule是在.content a -rule 之后指定的吗？

另一种解决方法是稍微提高特异性,即:

.parent .child_item { font-size: 16px; }

编辑:你可以在这里玩你的测试用例:http://jsfiddle.net/gburw/ 为了证明我的观点,尝试切换CSS声明,你会看到最后定义的任何规则将"赢".

编辑2:您可以在此处阅读有关CSS特异性的更多信息.这是一个非常简单的概念,困难的部分是避免与开发人员进行特异性战争=)所以你应该想出一个标准的方法来编写你公司的CSS.遵循Pagespeed和YSlow的指导方针也总是一个好主意.