因此我使用以下方法创建了一个圆 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 图像。
如何删除继承的背景图片?
最佳答案
简单的答案就是改变
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
(顶部和底部或左侧和右侧各一个)。 .
关于html - 如何禁用继承的 css 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1046872/