Question

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

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图像。

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

Answer 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 s（顶部和底部或左右各一个）。

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

希望它有所帮助。

Answer 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;
}

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

Answer 5

给div你不希望他继承属性背景。

Answer 6

最简单的是对所有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>

Answer 7

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

unset

关于developer.mozilla.org的更多信息

如何禁用继承的CSS样式？

7 个答案: