32

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

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

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

4

7 回答 7

13

简单的答案是改变

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

到

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

原因是当你为div.rounded div div它制定规则时，意味着每个 div元素都嵌套在 adiv中div，其中一个类为rounded，而不管嵌套如何。

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

顺便说一句，您通常可以div通过使用一种称为Sliding Doors的技术来简化此方法，使其仅使用两个 s（一个用于顶部和底部或左侧和右侧） 。

于 2009-06-26T00:44:51.607 回答
10

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

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

您还可以通过为每个单独的对象指定样式而不为 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>

希望能帮助到你。

于 2009-06-26T00:59:28.283 回答
7

最干净的解决方案可能是将您的 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;
}
于 2009-06-26T00:50:48.940 回答
2

如果您同时控制 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>
于 2009-06-26T01:05:44.433 回答
1

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

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

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

于 2021-01-02T09:06:55.823 回答
0

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

于 2009-06-26T00:45:38.780 回答
0

最简单的方法是对所有 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>
于 2009-06-26T02:57:18.763 回答