Possible Duplicate:
How do I prevent CSS inheritance?可能重复:如何防止CSS继承?
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?
有没有办法声明元素的CSS属性,使其不会影响它的任何子元素,或者是否有办法声明元素的CSS只实现指定的样式,而不是继承为其父元素声明的任何样式?
A quick example
一个简单的例子
HTML:
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:
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.
在正常情况下,人们会期望文本块“段落的内容”和“跨度的内容”都是12px和粗体。
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?
是否有一个属性包含在上面的CSS中的“div.content”块中,这将阻止它继承“#container form div”块中的声明,以将样式限制为“段落的内容”并且备用“跨度的内容“包括任何其他儿童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.
如果你想知道为什么,好吧,我创建了一个特定的CSS文件,它给我项目中的所有表单一个特别的感觉,并且表单下的div都继承了这种感觉。没问题。但是在我希望使用Flexigrid的形式内部,但flexigrid继承了样式,它看起来没用。如果我在表单之外使用flexigrid并且它不会继承表单css,那么它看起来很棒。否则它看起来很糟糕。
3 个解决方案
#1
46
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:
编辑:CSS工作组取决于:
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!)
编辑2:截至2015年3月所有现代浏览器,但Safari和IE / Edge已实现它:https://twitter.com/LeaVerou/status/577390241763467264(谢谢,@ Lea Verou!)
Edit 3: default
was renamed to revert
.
编辑3:默认重命名为还原。
#2
1
Can't you style the forms themselves? Then, style the divs accordingly.
你不能自己设计表格吗?然后,相应地设置div的样式。
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
您可以通过使重要的方式取代继承的样式:
form
{
/* styles */ !important
}
#3
0
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
CSS规则默认继承 - 因此是“级联”名称。要得到你想要的东西,你需要使用!重要的是:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
#1
46
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:
编辑:CSS工作组取决于:
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!)
编辑2:截至2015年3月所有现代浏览器,但Safari和IE / Edge已实现它:https://twitter.com/LeaVerou/status/577390241763467264(谢谢,@ Lea Verou!)
Edit 3: default
was renamed to revert
.
编辑3:默认重命名为还原。
#2
1
Can't you style the forms themselves? Then, style the divs accordingly.
你不能自己设计表格吗?然后,相应地设置div的样式。
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
您可以通过使重要的方式取代继承的样式:
form
{
/* styles */ !important
}
#3
0
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
CSS规则默认继承 - 因此是“级联”名称。要得到你想要的东西,你需要使用!重要的是:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}