使用 CSS 覆盖 element.style
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14910608/
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
Override element.style using CSS
提问by D-W
I have an HTML page from page builder, and it injects styleattribute directly to the element. I found it's considered as element.style.
我有一个来自页面构建器的 HTML 页面，它将style属性直接注入元素。我发现它被认为是element.style.
I want to override it using CSS. I can match the element, but it doesn't override it.
我想使用 CSS 覆盖它。我可以匹配元素，但它不会覆盖它。
How can I override the style using CSS?
如何使用 CSS 覆盖样式？
回答by DiscoInfiltrator
Although it's often frowned upon, you can technically use:
虽然它经常被人反对，但从技术上讲，您可以使用：
display: inline !important;
It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li>elements in the first place.
这通常不是好的做法，但在某些情况下可能是必要的。您应该做的是编辑您的代码，这样您就不会首先将样式应用于<li>元素。
回答by Kuldar Leement
This CSS will overwrite even the JavaScript:
这个 CSS 甚至会覆盖 JavaScript：
#demofour li[style] {
display: inline !important;
}
or for only first one
或者只有第一个
#demofour li[style]:first-child {
display: inline !important;
}
回答by Ayman Safadi
element.stylecomes from the markup.
element.style来自标记。
<li style="display: none;">
Just remove the styleattribute from the HTML.
只需style从 HTML 中删除该属性。
回答by user2677440
Using !important will override element.style via CSS like Change
使用 !important 将通过 CSS 覆盖 element.style，如 Change
color: #7D7D7D;
to
到
color: #7D7D7D !important;
That should do it.
那应该这样做。
回答by ersaloz
Of course the !important trick is decisive here, but targeting more specifically may help not only to have your override actually applied (weight criteria can rule over !important) but also to avoid overriding unintended elements.
当然 !important 技巧在这里是决定性的，但更具体的定位不仅可以帮助实际应用您的覆盖（权重标准可以支配 !important），还可以避免覆盖意外的元素。
With the developer tools of your browser, identify the exact value of the offending style attribute; e.g.:
使用浏览器的开发人员工具，确定违规样式属性的确切值；例如：
"font-family: arial, helvetica, sans-serif;"
or
或者
"display: block;"
Then, decide which branch of selectors you will override; you can broaden or narrow your choice to fit your needs, e.g.:
然后，决定您将覆盖哪个选择器分支；您可以扩大或缩小选择范围以满足您的需求，例如：
p span
or
或者
section.article-into.clearfix p span
Finally, in your custom.css, use the [attribute^=value] selector and the !important declaration:
最后，在您的 custom.css 中，使用 [attribute^=value] 选择器和 !important 声明：
p span[style^="font-family: arial"] {
font-family: "Times New Roman", Times, serif !important;
}
Note you don't have to quote the whole style attribute value, just enough to unambigously match the string.
请注意，您不必引用整个样式属性值，只需足以明确匹配字符串即可。
回答by tesla_coil
you can override the style on your css by referencing the offending property of the element style. On my case these two codes are set as 15px and is causing my background image to go black. So, i override them with 0px and placed the !important so it will be priority
您可以通过引用元素样式的违规属性来覆盖 css 上的样式。在我的情况下，这两个代码设置为 15px 并导致我的背景图像变黑。所以，我用 0px 覆盖它们并放置了 !important 所以它将是优先级
.content {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
回答by user1990587
As per my knowledge Inline sytle comes first so css class should not work.
据我所知，内联样式是第一位的，所以 css 类不应该工作。
Use Jquery as
使用 Jquery 作为
$(document).ready(function(){
$("#demoFour li").css("display","inline");
});
You can also try
#demoFour li { display:inline !important;}
回答by Kenta Kubo
Use JavaScript.
使用 JavaScript。
For example:
例如：
var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "inline";
}
