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

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 规则是在 之后 指定的 < code>.content a-规则？

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


.parent .child_item {
字体大小：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。