Html 有没有办法将样式强制设置为已经具有 style="" 属性的 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/104485/
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
Is there a way to force a style to a div element which already has a style="" attribute
提问by Martin Plante
I'm trying to skin HTML output which I don't have control over. One of the elements is a divwith a style="overflow: auto"attribute.
Is there a way in CSS to force that divto use overflow: hidden;?
我正在尝试为我无法控制的 HTML 输出设置皮肤。其中一个元素是div具有style="overflow: auto"属性的。
CSS 中有没有办法强制div使用它overflow: hidden;？
回答by Magnar
You can add !importantto the end of your style, like this:
您可以添加!important到样式的末尾，如下所示：
element {
overflow: hidden !important;
}
This is something you should not rely on normally, but in your case that's the best option. Changing the value in Javascript strays from the best practice of separating markup, presentation, and behavior (html/css/javascript).
这是您通常不应该依赖的东西，但在您的情况下，这是最好的选择。更改 Javascript 中的值偏离了分离标记、表示和行为 (html/css/javascript) 的最佳实践。
回答by John Millikin
Have you tried setting !importantin the CSS file? Something like:
您是否尝试过!important在 CSS 文件中进行设置？就像是：
#mydiv { overflow: hidden !important; }
回答by DanWoolston
Not sure if this would work or not, haven't tested it with overflow.
不确定这是否有效，还没有用overflow.
overflow:hidden !important
maybe?
也许？
回答by BrewinBombers
If the div has an inline style declaration, the only way to modify it without changing the source is with JavaScript. Inline style attributes 'win' every time in CSS.
如果 div 具有内联样式声明，则在不更改源的情况下修改它的唯一方法是使用 JavaScript。内联样式属性每次都在 CSS 中“获胜”。
回答by TheZenker
Magnar is correct as explained by the W3C spec pasted below. Seems the !important keyword was added to allow users to override even "baked in" style settings at the element level. Since you are in the situation where you do not have control over the html this may be your best option, though it would not be a normal design pattern.
正如下面粘贴的 W3C 规范所解释的那样，Magnar 是正确的。似乎添加了 !important 关键字以允许用户在元素级别覆盖甚至“烘焙”样式设置。由于您无法控制 html，因此这可能是您的最佳选择，尽管它不是正常的设计模式。
Excerpt:
摘抄：
6.4.2 !important rules CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the keywords"!" and "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
Note. This is a semantic change since CSS1. In CSS1, author"!important" rules took precedence over user "!important" rules.
Declaring a shorthand property (e.g., 'background') to be"!important" is equivalent to declaring all of its sub-properties to be "!important".
Example(s): The first rule in the user's style sheet in the following examplecontains an "!important" declaration, which overrides the corresponding declaration in the author's styles sheet. The second declaration will also win due to being marked "!important". However, the third rule in the user's style sheet is not "!important" and will therefore lose to the second rule in the author's style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is "!important". This shows that "!important" declarations have a function also within author style sheets.
/* From the user's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }
6.4.2 !important 规则 CSS 试图在作者和用户样式表之间建立一种平衡。默认情况下，作者样式表中的规则会覆盖用户样式表中的规则（参见级联规则 3）。
However, for balance, an "!important" declaration (the keywords“！” 并且“重要”遵循声明）优先于正常声明。作者和用户样式表都可能包含“!important”声明，用户“!important”规则覆盖作者“!important”规则。此 CSS 功能通过为具有特殊要求（大字体、颜色组合等）的用户提供对演示文稿的控制来提高文档的可访问性。
Note. This is a semantic change since CSS1. In CSS1, author"!important" 规则优先于用户 "!important" 规则。
Declaring a shorthand property (e.g., 'background') to be"!important" 相当于将其所有子属性声明为 "!important"。
Example(s): The first rule in the user's style sheet in the following example包含一个“!important”声明，它覆盖了作者样式表中的相应声明。由于被标记为“！重要”，第二个声明也将获胜。然而，用户样式表中的第三条规则不是“!important”，因此将输给作者样式表中的第二条规则（它恰好在速记属性上设置样式）。此外，第三作者规则将输给第二作者规则，因为第二条规则是“!important”。这表明“!important”声明在作者样式表中也有一个功能。
/* From the user's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }
回答by 17 of 26
As far as I know, styles on the actual HTML elements override anything you can do in separate CSS style.
据我所知，实际 HTML 元素上的样式会覆盖您可以在单独的 CSS 样式中执行的任何操作。
You can, however, use Javascript to override it.
但是，您可以使用 Javascript 来覆盖它。
