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

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

解决它的另一种方法是稍微增加特异性，即:


.parent .child_item {
字体大小:16px；
}


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

编辑 2:您可以 read more about CSS specificity here .这是一个非常容易掌握的概念，困难的部分是避免与其他开发人员的特异性 war =) 所以你应该想出一个在你的公司编写 CSS 的标准方法。遵循 Pagespeed 和 YSlow 的指南也是一个好主意。