CSS 如何忽略父css样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/946645/
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 to ignore parent css style
提问by SeanDowney
I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.
我想知道如何忽略父样式并使用默认样式（无）。我将展示我的具体案例作为示例，但我很确定这是一个普遍的问题。
<style>
#elementId select {
height:1em;
}
</style>
<div id="elementId">
<select name="funTimes" style="" size="5">
<option value="test1">fish</option>
<option value="test2">eat</option>
<option value="test3">cows</option>
</select>
</div>
Ways I do not want to solve this problem:
我不想解决这个问题的方法：
- I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
- Preferably not override the height style using the style attribute.
- 我无法编辑设置了“#elementId select”的样式表，我的模块将无法访问它。
- 最好不要使用 style 属性覆盖高度样式。
For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.
例如使用萤火虫我可以关闭父样式，一切都很好，这就是我想要的效果。
Once a style is set, can it be disabled or must it be overridden?
设置样式后，可以禁用它还是必须覆盖它？
采纳答案by PatrikAkerstrand
It must be overridden. You could use:
它必须被覆盖。你可以使用：
<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">
#elementId select.funTimes {
/* Override styles here */
}
Make sure you use !importantflag in css style e.g. margin-top: 0px !importantWhat does !important mean in CSS?
确保!important在 css 样式中使用标志，例如margin-top: 0px !important!important 在 CSS 中是什么意思？
You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name
您可以使用属性选择器，但由于旧版浏览器（阅读 IE6 等）不支持该选择器，因此最好添加类名
回答by Fabian Brenes
You could turn it off by overriding it like this:
您可以通过像这样覆盖它来关闭它：
height:auto !important;
高度：自动！重要；
回答by Wayne
This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.
由于编辑，这被推到了顶部......答案已经变得有点陈旧，并且今天没有像标准中添加的另一个解决方案那么有用。
There is now an "all" shorthand property.
现在有一个“all”速记属性。
#elementId select.funTimes {
all: initial;
}
This sets all css properties to their initial value ... notesome of the initial values are inherit; Resulting in some formatting still taking place on the element.
这会将所有 css 属性设置为它们的初始值……注意一些初始值是继承的；导致元素上仍在进行一些格式化。
Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.
由于在阅读代码或将来代码时需要暂停，除非您最重要，否则不要使用它，因为过程是可能出现错误/错误的地方！编辑页面时。但显然，如果有大量属性需要重置，那么“全部”就是要走的路。
Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand
回答by Jason
you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.
您可以在 CSS 样式表中创建另一个定义，该定义基本上与初始规则相反。您还可以将“！重要”附加到所述规则以确保它坚持下去。
回答by Ahmar Mahmood
You should use this
你应该用这个
height:auto !important;
高度：自动！重要；
回答by Rajatgsr
I had a similar situation while working on a joomla website.
我在 joomla 网站上工作时遇到了类似的情况。
Added a class name to the module to be affected. In your case:
向要受影响的模块添加了类名。在你的情况下：
<select name="funTimes" class="classname">
then made the following single line change in the css. Added the line
然后在 css 中进行了以下单行更改。添加了行
#elementId div.classname {style to be applied !important;}
worked well!
工作得很好！
回答by elad silver
If I understood the question correctly:
you can use autoin the CSSlike this width: auto;and it will go back to default settings.
如果我理解正确的问题是：你可以使用auto在CSS类似这样的width: auto;，它会返回到默认设置。
回答by Christopher Tokar
It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:
CSS 有一种方法可以简单地添加一个额外的样式（例如，在页面的头部部分，它会覆盖链接的样式表），例如：
<head>
<style>
#elementId select {
/* turn all styles off (no way to do this) */
}
</style>
</head>
and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.
并关闭所有以前应用的样式，但没有办法做到这一点。您必须在页面的 head 部分覆盖 height 属性并将其设置为新值。
<head>
<style>
#elementId select {
height:1.5em;
}
</style>
</head>
回答by Michael Zheng
Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler):
请参阅下面的打字稿，再次将 css 类重新应用于元素以覆盖父容器（通常是框架组件）css 样式并强制您的自定义样式。您的应用程序框架（无论是 angular/react，可能是这样做的，因此父容器 css 被重新应用，并且 css-class-name 中的任何预期效果都没有出现在您的子元素中。调用 this.overrideParentCssRule(childElement, ' css-class-name'); 做框架刚刚做的事情（在 document.ready 或 end of event handler 中调用它）：
overrideParentCssRule(elem: HTMLElement, className: string) {
let cssRules = this.getCSSStyle(className);
for (let r: number = 0; r < cssRules.length; r++) {
let rule: CSSStyleRule = cssRules[r];
Object.keys(rule.style).forEach(s => {
if (isNaN(Number(s)) && rule.style[s]) {
elem.style[s] = rule.style[s];
}
});
}
}
- Mike Zheng [email protected]
回答by cyberspy
There are a bunch of values that can be used to undo CSS rules: initial, unset & revert. More details from the CSS Working Group at W3C:
有很多值可以用来撤销 CSS 规则：initial、unset 和 revert。来自 W3C 的 CSS 工作组的更多详细信息：
https://drafts.csswg.org/css-cascade/#defaulting-keywords
https://drafts.csswg.org/css-cascade/#defaulting-keywords
As this is 'draft' not all are fully supported, but unset and initial are in most major browsers, revert has less support.
由于这是“草稿”，并非全部都得到完全支持，但大多数主要浏览器都支持 unset 和 initial，因此 revert 的支持较少。
