Question

嘿所有 - 简单的CSS新手问题，但我似乎无法输入正确的问题来问我的朋友Google。

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

整个事情是第三方ListBox。当它被创建时，我能够在后面的代码中的外部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');

思考？有关如何完成此任务的文章的链接？

Answer 1

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

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

以这种方式使用3个类名称也赋予规则更高的特异性。

Answer 2

您可以尝试通过选择器显式设置样式：

.ClassToOverrideBorders .ClassWithBorders
{
    border: 0;
}

Answer 3

所有关于特殊性的警告“！important”偶尔可以接管。

如果第三方风格是：

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

然后您可以删除这些边框：

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

如果出于某种原因，这不起作用，请尝试：

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

如果这仍然不起作用，第三方工具可能会通过javascript应用边框样式，您无法通过CSS覆盖（因为加载和应用程序顺序）并且您需要使用一个Javascript样式改变如：

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

Answer 4

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

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

4 个答案: