如何禁用继承的 css 样式？

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 元素嵌套在 a 内 div 里面一个 div 与一类 rounded, 无论嵌套.

如果您只想定位直接后代的 div，您可以使用以下语法 div.rounded div > div （尽管这仅受较新的浏览器支持）。

顺便说一句，您通常可以简化此方法以仅使用两个 divs（顶部和底部或左侧和右侧各一个），通过使用一种称为 滑动门.

Answer 2

层叠样式表被设计用于继承。继承是其内在的存在。如果它不是建立被级联，他们只会被称为“样式表”。

这就是说，如果一个继承的风格不适合你的需求，你就会有另一种风格更接近对象覆盖它。忘记“阻塞继承”的概念。

您还可以通过给风格到每一个单独的对象，而不是使发型像DIV，P，预等一般标签选择更细化的解决方案。

例如，可以使用样式以＃开始具有特定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

简单的是类IFY所有的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>