Html 如何禁用继承的 css 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1046872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable inherited css styles?
提问by Hyman B Nimble
So I am creating a container with rounded corners using the following method:
所以我使用以下方法创建一个带圆角的容器：
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;
}
Now I want to use a div inside my container:
现在我想在我的容器中使用一个 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>
However, with I put a div inside my nested divs, the button has the bl image in the corner.
但是，由于我在嵌套的 div 中放置了一个 div，该按钮的角落有 bl 图像。
How do I remove the inherited background image?
如何删除继承的背景图像？
采纳答案by Aupajo
The simple answer is to change
简单的答案是改变
div.rounded div div div {
padding: 10px;
}
to
到
div.rounded div div div {
background-image: none;
padding: 10px;
}
The reason is because when you make a rule for div.rounded div divit means everydivelement nested inside a divinside a divwith a class of rounded, regardless of nesting.
原因是因为当您为div.rounded div div它制定规则时，意味着每个div元素都嵌套在 a divinside a 中div，类为rounded，而不管嵌套如何。
If you want to only target a div that's the direct descendent, you can use the syntax div.rounded div > div(though this is only supported by more recent browsers).
如果您只想定位作为直接后代的 div，您可以使用语法div.rounded div > div（尽管这仅受更新的浏览器支持）。
Incidentally, you can usually simplify this method to use only two divs (one each for either top and bottom or left and right), by using a technique called Sliding Doors.
顺便说一下，您通常可以div通过使用一种称为Sliding Doors的技术来简化此方法，使其仅使用两个s（顶部和底部或左右各一个）。
回答by Wadih M.
Cascading Style Sheet are designed for inheritance. Inheritance is intrinsic to their existence. If it wasn't built to be cascading, they would only be called "Style Sheets".
级联样式表是为继承而设计的。继承是它们存在的本质。如果它不是为级联而构建的，则它们只会被称为“样式表”。
That said, if an inherited style doesn't fit your needs, you'll have to override it with another style closer to the object. Forget about the notion of "blocking inheritance".
也就是说，如果继承的样式不符合您的需要，您将不得不使用更接近对象的另一种样式来覆盖它。忘记“阻塞继承”的概念。
You can also choose the more granular solution by giving styles to every individual objects, and not giving styles to the general tags like div, p, pre, etc.
您还可以通过为每个单独的对象提供样式来选择更精细的解决方案，而不是为 div、p、pre 等一般标签提供样式。
For example, you can use styles that start with # for objects with a specific ID:
例如，您可以对具有特定 ID 的对象使用以 # 开头的样式：
<style>
#dividstyle{
font-family:MS Trebuchet;
}
</style>
<div id="dividstyle">Hello world</div>
You can define classes for objects:
您可以为对象定义类：
<style>
.divclassstyle{
font-family: Calibri;
}
</style>
<div class="divclassstyle">Hello world</div>
Hope it helps.
希望能帮助到你。
回答by zombat
The cleanest solution is probably to specify your divs as exact children.
最干净的解决方案可能是将您的 div 指定为确切的孩子。
Try changing this:
尝试改变这个：
div.rounded div div {
background: url('bl.gif') no-repeat bottom left;
}
To this:
对此：
div.rounded > div > div {
background: url('bl.gif') no-repeat bottom left;
}
回答by acrosman
If you control both the HTML and CSS, I'd suggest switching to using ID's on all the divs needed for the rounded corner.
如果您同时控制 HTML 和 CSS，我建议切换到在圆角所需的所有 div 上使用 ID。
CSS
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
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>
回答by DreadPirateShawn
Simplest is to class-ify all of the divs:
最简单的是对所有 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;
}
And then use:
然后使用：
<div class='round'><div class='br'><div class='bl'><div class='inner'>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>
回答by Itay Moav -Malimovka
Give the div you don't want him inheriting the property backgroundtoo.
给 div 你不希望他也继承属性背景。
