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 - 规则在 {{1>之后指定 }} - ？排除

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

.content a

编辑：您可以在此处使用您的测试用例：http://jsfiddle.net/gburw/ 为了证明我的观点，尝试切换CSS声明，你会发现最后定义的规则将“赢”。

编辑2 ：您可以read more about CSS specificity here。这是一个非常简单的概念，困难的部分是避免与开发人员进行特异性战争=）所以你应该想出一个标准的方法来编写你公司的CSS。遵循Pagespeed和YSlow的指导方针也总是一个好主意。

Answer 2

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

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

这将使其比.content a更重，无论哪个被宣布为最后一次。

Answer 3

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

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

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

并不像#container .content a那样。如果情况并非如此，您还可以将.parent a的特异性提高到.parent .child a。

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

3 个答案: