如何禁用继承的 CSS 样式？答案

【问题标题】：How can I disable inherited css styles?如何禁用继承的 CSS 样式？
【发布时间】：2010-11-06 00:30:55
【问题描述】：

所以我正在使用以下方法创建一个带圆角的容器：

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div div div {
    padding: 10px;
}

现在我想在我的容器中使用一个 div：

.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

<div class='round'><div><div><div>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

但是，当我在嵌套的 div 中放置一个 div 时，按钮的角落有 bl 图像。

如何删除继承的背景图片？

【问题讨论】：

标签： html css stylesheet

【解决方案1】：

简单的答案是改变

div.rounded div div div {
    padding: 10px;
}

到

div.rounded div div div {
    background-image: none;
    padding: 10px;
}

原因是因为当您为div.rounded div div 制定规则时，它意味着每个 div 元素嵌套在div 内的div 内，类为rounded，不管嵌套。

如果您只想定位作为直接后代的 div，您可以使用语法 div.rounded div > div（尽管只有更新的浏览器才支持此语法）。

顺便说一句，您通常可以通过使用一种称为Sliding Doors 的技术来简化此方法，使其仅使用两个div（上下或左右各一个）。

【讨论】：

是否可以在 CSS 中说“忽略所有继承的样式”？
不，您必须手动覆盖各个属性。如果您仔细注意为类名所做的选择，通常可以避免这成为问题。
"css subclass doesn't take property"：我现在明白为什么它被另一个“更高”的规则覆盖了。用 ">" 适应更高的规则就成功了。

【解决方案2】：

层叠样式表是为继承而设计的。继承是它们存在的本质。如果它不是级联的，它们只会被称为“样式表”。

也就是说，如果继承的样式不符合您的需求，您将不得不用更接近对象的另一种样式覆盖它。忘记“阻塞继承”的概念吧。

您还可以通过为每个单独的对象指定样式来选择更精细的解决方案，而不是为 div、p、pre 等一般标签指定样式。

例如，您可以对具有特定 ID 的对象使用以 # 开头的样式：

<style>
#dividstyle{
    font-family:MS Trebuchet;
}
</style>
<div id="dividstyle">Hello world</div>

您可以为对象定义类：

<style>
.divclassstyle{
    font-family: Calibri;
}
</style>
<div class="divclassstyle">Hello world</div>

希望对你有帮助。

【讨论】：

很好的建议：“例如，你可以为具有特定ID的对象使用以#开头的样式”，非常有用。

【解决方案3】：

最干净的解决方案可能是将您的 div 指定为确切的子级。

尝试改变这个：

div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}

到这里：

div.rounded > div > div {
    background: url('bl.gif') no-repeat bottom left;
}

【讨论】：

同意 Aupajo ——如果解决方案不是跨浏览器兼容的，那么它就是一个不完美的解决方案。这里的其他答案是跨浏览器兼容的。否决这个答案。
8年后，这个答案应该被投票更高。现在每个浏览器都支持 css 选择器：caniuse.com/#search=css%20selector

【解决方案4】：

如果您同时控制 HTML 和 CSS，我建议切换到在圆角所需的所有 div 上使用 ID。

CSS

#d1 {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
#d2 {
    background: url('br.gif') no-repeat bottom right;
}
#d3 {
    background: url('bl.gif') no-repeat bottom left;
}
#d4 {
    padding: 10px;
}

HTML

<div id="d1"><div id="d2"><div id="d3"><div id="d4">
    <div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

【讨论】：

【解决方案5】：

您可以使用unset 关键字来重置属性。

div.rounded div div div {
    background-image: unset; /* reset background */
    padding: unset; /* reset padding */
}

更多信息developer.mozilla.org

【讨论】：

【解决方案6】：

给你不希望他继承属性background的div。

【讨论】：

【解决方案7】：

最简单的方法是对所有的 div 进行分类：

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div.br {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div.br div.bl {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div.br div.bl div.inner {
    padding: 10px;
}
.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

然后使用：

<div class='round'><div class='br'><div class='bl'><div class='inner'>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

【讨论】：