CSS以防止子元素继承父样式 [英] CSS to prevent child element from inheriting parent styles
问题描述
可能重复：
如何防止CSS继承？
有一种方法来声明一个元素的CSS属性，这样它不会影响它的任何子元素，或者有一种方法来声明一个元素的CSS只实现指定的样式，而不继承任何声明的父类的样式？
一个快速示例
HTML：
< body>
< div id ='container'>
< form>
< div class ='sub'>
段落的内容
< div class ='content'> span的内容< / div>
< / div>
< / form>
< / div>
< / body>
CSS：
form div {
font-size：12px;
font-weight：bold;
}
div.content {
/ *有什么可以去这里？ * /
}
在正常情况下，
在div.content块中有上述CSS中要包含的属性将阻止它继承#container form div块中的声明，以将样式限制为只是段落的内容，并备用span的内容，包括任何其他子div？
如果你想知道为什么，那么，我创建了一个特定的CSS文件，给我的项目上的所有形式一个特殊的感觉，并在表单下的div都继承的感觉。没问题。但在里面的形式我想使用Flexigrid但flexigrid继承的风格，它只是看起来无用。如果我在表单之外使用flexigrid，这样它将不会继承窗体css，那么它看起来不错。
不幸的是，你在这里很幸运。
有一个 inherit 可以将某个值从父级复制到其子级，但是没有其他属性（这将涉及另一个选择器
您必须手动恢复样式更改：
div {color：green; }
form div {color：red; }
form div div.content {color：green; }
如果您有权访问标记，可以添加几个类，
形式div.sub {color：red; }
form div div.content {/ * remain green * /}
修改：CSS工作组是最新的：
div.content {
all：revert;
}
不知道什么时候或是否这将由浏览器实现。 p>
编辑2：截至2015年3月，Safari和IE / Edge已实现所有现代浏览器： https://twitter.com/LeaVerou/status/577390241763467264 （感谢， 编辑3： 默认 code>已重命名为 revert 。
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id='container'>
<form>
<div class='sub'>
Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {
font-size: 12px;
font-weight: bold;
}
div.content {
/* Can anything go here? */
}
Under normal circumstances one would expect the The text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the divs under the form all inherit the feel. No problem. But inside the the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, @Lea Verou!)
Edit 3: default was renamed to revert.
这篇关于CSS以防止子元素继承父样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
