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

【问题标题】：Inner div has borders - how to override with a class on an outer div?内部 div 有边框 - 如何用外部 div 上的类覆盖？
【发布时间】：2011-06-25 14:14:51
【问题描述】：

大家好 - 简单的 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');

想法？有关如何完成此操作的文章的链接？

【问题讨论】：

为什么不编辑样式表？在您的代码中，如果您将border 设置为0px，它将删除它..
我不能这样做，因为这样他们控制的每个实例都没有边框。只有当我将它们的控制嵌入另一个边界时，边界才不合适。为了清楚起见，我没有在我的初始帖子中添加太多信息...

标签： css

【解决方案1】：

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

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

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

【讨论】：

谢谢！这很好用，但我必须添加 !important 标记以使其覆盖内部类。谢谢！！
@Thad：您可能需要重新考虑!important (see here)。我已经更新了我的答案以增加特异性 - 也许这对你有用而不需要!important？
完成，完成，完成！完美地工作，不需要！important。谢谢！！

【解决方案2】：

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

.ClassToOverrideBorders .ClassWithBorders
{
    border: 0;
}

【讨论】：

【解决方案3】：

这一切都与特殊性有关，但需要注意的是“！important”偶尔会接管。

如果第 3 方风格是：

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

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

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

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

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

如果这仍然不起作用，则第 3 方工具可能正在通过 javascript 应用边框样式，您将无法通过 CSS 覆盖该样式（因为加载和应用程序顺序），您需要使用Javascript 样式更改如下：

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

【讨论】：

我不建议盲目地使用!important - 最好尝试找出问题的根源。
感谢您提供更多详细信息以及 jQuery 示例！我最初的 jQuery 语句将删除 ClassWithBorders 应用的所有格式，这可能不合适。
@Andy E - 我完全同意。不幸的是，CSS 和 Javascript 非常依赖于整个 DOM，我们通常只在这里得到sn-ps。

【解决方案4】：

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

【讨论】：

这也可以，但我只希望外边框没有边框。这会改变父 div 内的所有 div，还是仅仅因为 > 而改变直接的 div？
它只覆盖直接的 div