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

我们的问题就是这样。我们有这样的一段代码。为什么元素样式覆盖在元素上设置的类？

<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？

来源

2011-09-30 EnterSB

它们*应该*得到'.parent a'，因为它具有相同的特异性，最后定义，并覆盖'.content a'中的每个属性。看起来你可能已经创建了一个减少了bug的简化测试用例。 – Quentin

考虑父母和孩子都有自己的特征的情况。孩子可以继承其父母的财产，也可以拥有自己的财产。如果儿童和家长分享的财产优于儿童的财产。 –

这是否仅在某些浏览器中发生？你有firebug，一个firefox的浏览器插件，它解释了CSS的应用方式和原因？ –

两个规则具有相同的特异性，故取其规则是最后的样式声明将赢得你...你确定了.parent a -rule指定的.content a -rule后？

另一种方式来解决这个问题将是增加的特异性略，即：

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

编辑：您可以玩弄你的测试案例在这里：http://jsfiddle.net/gburw/ 为了证明我的观点，尝试切换CSS声明，你会看到最后定义的任何规则都将“赢”。

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

来源

2011-09-30 07:44:46 PatrikAkerstrand

规则'.parent a'是文件中的第二个。据我了解，它应该适用。我也尝试过你提出的解决方案，但仍然无法正常工作。 – EnterSB

嗨，我读了关于CSS的特殊性，它有帮助。毕竟，你是对的。它可以用于你的解决方案和'.parent'解决方案。我仍然不知道为什么浏览器不想在我们设置时显示。 – EnterSB

或者如果你真的想要.parent a被应用。你可以这样做：

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

，将给予更多的重量比.content a无论哪个被宣布最后。

来源

2011-09-30 07:48:57 rgin

一般来说，如果可以避免它，不是一个好主意 –

使用！重要的是一个可怕的做法。它可以（几乎）总是被避免，并且总是导致特定的战争。 “好吧...... X认为他非常聪明，我会重复我的规则，并且抛出一些ID选择器，以便采取更好的措施！拿这个，丢掉重要的规则！” – PatrikAkerstrand

它吮吸每一个具体问题都必须用强制性的“使用！重要”来回答。无情的现实。 – BoltClock

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

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

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

，而不是像成才#container .content a。如果不是这种情况，您还可以将.parent a增加到.parent .child a。

来源

2011-09-30 08:06:16 Wex

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

回答

相关问题