使用CSS覆盖element.style

我有一个来自页面构build器的HTML页面，它直接将style属性注入元素。 我发现它被认为是element.style 。

我想用CSS覆盖它。 我可以匹配元素，但不会覆盖它。

我怎样才能覆盖使用CSS的风格？

Answer 1

虽然经常皱眉，你可以在技术上使用：

 display: inline !important; 

这通常不是好的做法，但在某些情况下可能是必要的。 你应该做的是编辑你的代码，这样你就不会将样式应用到<li>元素。

Answer 2

这个CSS会覆盖甚至JavaScript：

 #demofour li[style] { display: inline !important; } 

或只为第一个

 #demofour li[style]:first-child { display: inline !important; } 

Answer 3

element.style来自标记。

 <li style="display: none;"> 

只要从HTML中删除style属性。

Answer 4

使用！important会通过CSS来改变element.style

 color: #7D7D7D; 

至

 color: #7D7D7D !important; 

这应该做到这一点。

Answer 5

当然，重要的技巧在这里是决定性的，但是更具体的定位可能不仅有助于实际应用覆盖（权重标准可以统治重要），而且还可以避免覆盖无意的元素。

使用浏览器的开发人员工具，确定违规风格属性的确切值; 例如：

 "font-family: arial, helvetica, sans-serif;" 

要么

 "display: block;" 

然后，决定你将覆盖哪个分支select器; 您可以扩大或缩小您的select以适应您的需求，例如：

 p span 

要么

 section.article-into.clearfix p span 

最后，在你的custom.css中，使用[attribute ^ = value]select器和！重要声明：

 p span[style^="font-family: arial"] { font-family: "Times New Roman", Times, serif !important; } 

请注意，您不必引用整个样式属性值，就足以明确地匹配string。

Answer 6

据我所知，内联sytle首先，所以CSS类不应该工作。

使用JQuery作为

 $(document).ready(function(){ $("#demoFour li").css("display","inline"); }); You can also try #demoFour li { display:inline !important;} 

Answer 7

使用JavaScript。

例如：

 var elements = document.getElementById("demoFour").getElementsByTagName("li"); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "inline"; }