内部div有边框 - 如何覆盖外部div上的类？

嘿所有 - 简单的CSS新手问题，但我似乎无法进入正确的问题问我的朋友谷歌。内部div有边框 - 如何覆盖外部div上的类？

如果一个内部div有一个添加边框的类，我该如何将该div放入外部div并让该类覆盖这些边框？

整件事情是第三方列表框。当它被创建时，我可以在后面的代码中的外部div上添加样式（ClassToOverrideBorders），但无法控制添加边框的内部div。

<style> 
.UserControlStyle .ClassWithBorders 
{ 
    border: 1px solid #8e8e8e; 
    background: #FFF; 
} 
</style> 

<div class="UserControlStyle ClassToOverrideBorders"> 
    <div class="ClassWithBorders"> 
     <bunchofcontent /> 
    </div> 
</div>

我想可以使用jQuery做这个（类型，未测试）... $('.UserControlStyle > * .ClassToOverrideBorders').removeClass('ClassWithBorders');

想法？关于如何实现这一目标的文章的链接？

来源

2011-02-11 Thad Peiffer

你为什么不修改样式？在你的代码中，如果你将`border`设置为`0px`，它会将其删除。 – 2011-02-11 14:18:11

我无法这么做，因为他们的控件的每个实例都没有边框。只有当我将他们的控制嵌入到另一个控制中时，边界才不合适。为了清楚起见，我没有在我的初始帖子中添加太多的信息... – 2011-02-11 14:35:15

您可以使用直接子选择器，以及border属性的值更改为none：

.UserControlStyle.ClassToOverrideBorders > .ClassWithBorders { 
    border: none; 
}

使用3类名以这种方式给人的规则特异性更高了。

来源

2011-02-11 14:17:58

+1 - 我对`>`完全消隐。 – 2011-02-11 14:18:48

谢谢！这很好，但我不得不添加！重要标签来让它覆盖内部类。谢谢！！ – 2011-02-11 14:28:20

你可以尝试通过明确的选择设置样式：

.ClassToOverrideBorders .ClassWithBorders 
{ 
    border: 0; 
}

来源

2011-02-11 14:18:11

这一切都需要提醒的是偶尔能接管专一“重要！”。

如果第三方的风格是：

.ClassWithBorders 
{ 
    border: 1px solid #8e8e8e; 
    background: #FFF; 
}

然后你就可以删除那些边框搭配：

.UserControlStyle .ClassWithBorders 
{ 
    border: 0; 
    background: #FFF; 
}

如果由于某种原因，这是行不通的，请尝试：

.UserControlStyle .ClassWithBorders 
{ 
    border: 0 !important; 
    background: #FFF; 
}

如果这仍然不起作用，第三方工具可能会通过JavaScript应用边框样式，您不会是BLE覆盖通过CSS（因为负载&申请顺序），你需要去与一个Javascript风格上的变化，如：

$('.ClassWithBorder').css('border', 0);

来源

2011-02-11 14:18:17 Walker

.ClassToOverrideBorders > div { 
    border: none!important; 
}

来源

2011-02-11 14:20:35

内部div有边框 - 如何覆盖外部div上的类？

回答

相关问题