Html 如何禁用继承的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>

。按钮{
边框：1px实心#999；
背景：#eeeeee url（“”）；
文本对齐：居中；
}
.按钮：悬停{
背景色：#c4e2f2；
}

但是，当我在嵌套的div中放置一个div时，按钮的角落中有一个bl图像

---

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

简单的答案是更改

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

到

原因是，当您为

div.rounded div

制定规则时，它意味着嵌套在

div

中的

div

中的每个

div

元素，无论嵌套情况如何

如果您只想针对作为直接子代的div，可以使用语法

div.rounded div>div

（尽管这仅由较新的浏览器支持）

---

顺便说一句，您通常可以简化此方法，只使用两个

div

s（顶部和底部或左侧和右侧各一个），通过使用一种称为。

的技术，将您不希望他继承属性background的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;
}

---

级联样式表是为继承而设计的。继承是它们存在的内在条件。如果它不是为了级联而构建的，那么它们只会被称为“样式表”

这就是说，如果继承的样式不适合您的需要，您必须使用更接近对象的另一个样式来替代它。忘记“阻止继承”的概念吧

您还可以选择更精细的解决方案，为每个单独的对象提供样式，而不为常规标记（如div、p、pre等）提供样式

例如，对于具有特定ID的对象，可以使用以#开头的样式：

<style>
#dividstyle{
    font-family:MS Trebuchet;
}
</style>
<div id="dividstyle">Hello world</div>

#dividstyle{
字体系列：MS Trebuchet；
}
你好，世界

可以为对象定义类：

<style>
.divclassstyle{
    font-family: Calibri;
}
</style>
<div class="divclassstyle">Hello world</div>

.divclassstyle{
字体系列：Calibri；
}
你好，世界

---

希望有帮助。

如果您同时控制HTML和CSS，我建议在圆角所需的所有div上使用ID

CSS

HTML

---

最简单的方法是将所有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>

---

您可以使用

unset

关键字重置属性

div.rounded div div div {
    background-image: unset; /* reset background */
    padding: unset; /* reset padding */
}

---

更多关于

的信息是否可以在CSS中说“忽略所有继承的样式”？不，您必须手动覆盖各个属性。如果您仔细注意为类名所做的选择，通常可以避免这成为一个问题。“css子类不接受属性”：我现在明白为什么它被另一个“更高”的规则覆盖了。通过“>”调整更高的规则就可以了。与Aupajo达成一致——如果解决方案不兼容跨浏览器，那么它就是一个不完美的解决方案。这里的其他答案是跨浏览器兼容的。否决这个答案。8年后，这个答案应该被否决。现在每个浏览器都支持css选择器：很好的建议：“例如，您可以使用以#开头的样式，用于具有特定ID的对象”，非常有用。

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>

div.rounded div div div {
    background-image: unset; /* reset background */
    padding: unset; /* reset padding */
}