如何禁用继承的 css 样式？

因此，我使用以下方法创建一个带有圆角的容器：

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

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

简单的答案就是改变

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

to

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

原因是因为当你制定规则时div.rounded div div它的意思是every div元素嵌套在 a 内div里面一个div与一类rounded, 无论嵌套.

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

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