如何禁用继承的CSS样式?

简单的答案是改变

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

到

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

原因是当你为 div.rounded div div 它意味着 每一个 div 嵌套在 div 里面 div 与一类 rounded , 不考虑嵌套 .

如果您只想针对直接派生的DIV,可以使用语法 div.rounded div > div (尽管这只受最近的浏览器支持)。

顺便说一下,您通常可以将此方法简化为只使用两个 div 通过使用一种称为 Sliding Doors .

层叠样式表是为继承而设计的。继承是它们存在的内在因素。如果它不是为了层叠而构建的,那么它们只能称为“样式表”。

也就是说,如果继承的样式不符合您的需要,则必须用更接近对象的另一个样式覆盖它。忘记“阻塞继承”的概念。

您还可以通过为每个单独的对象提供样式,而不是为诸如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>

希望它有帮助。

最干净的解决方案可能是将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;
}

如果您同时控制HTML和CSS,我建议切换到圆角所需的所有div上使用i d。

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>

把你不想让他继承财产的分区给他 背景 也是。

最简单的方法是将所有的潜水器分类:

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>