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

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

这两个规则具有相同的特异性，因此样式声明中的最后一个规则将获胜...您确定在.content a .parent a 之后指定.parent a吗？

解决该问题的另一种方法是稍微增加特异性，即：

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

编辑 ：您可以在此处测试您的测试用例： http : //jsfiddle.net/gburw/为了证明我的观点，请尝试切换CSS声明，您将看到最后定义的任何规则都会“获胜”。

编辑2 ：您可以在此处阅读有关CSS特异性的更多信息 。 这是一个非常简单的概念，难以避免的是避免与其他开发人员进行特异性冲突=）因此，您应该想出一种在公司中编写CSS的标准方法。 遵循Pagespeed和YSlow的指导原则总是一个好主意。

Answer 2

或者，如果您真的希望应用.parent a 。 你可以这样做：

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

不管最后声明哪个，它都会比.content a赋予更大的权重。

Answer 3

听起来像是CSS特殊性问题。 检查以确保您的CSS选择器实际上是：

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

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

而不像#container .content a 。 如果不是这种情况，您还可以将.parent a的特异性提高到.parent .child a 。