html - 如何禁用继承的 css 样式？

Question

因此我使用以下方法创建了一个圆 Angular 容器:

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 时，按钮的 Angular 上有 bl 图像。

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

Answer 1

简单的答案就是改变

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

到

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

原因是因为当您为 div.rounded div div 制定规则时，它意味着 every div 元素嵌套在 中div 位于 div 中，类为 rounded，不考虑嵌套。

如果您只想定位直接后代的 div，可以使用语法 div.rounded div > div(尽管只有较新的浏览器才支持这种方法)。

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