如何禁用继承的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元素都嵌套div在一个div带有类的内部a 中rounded,而不管嵌套.

如果您只想定位直接后代的div,则可以使用语法div.rounded div > div(尽管只有更新的浏览器才支持).

顺便提一下,通常可以div使用一种名为Sliding Doors的技术,将此方法简化为仅使用两个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;
}