使用CSS覆盖element.style

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

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

截图

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

虽然经常皱眉,你可以在技术上使用:

 display: inline !important; 

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

这个CSS会覆盖甚至JavaScript:

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

或只为第一个

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

element.style来自标记。

 <li style="display: none;"> 

只要从HTML中删除style属性。

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

 color: #7D7D7D; 

 color: #7D7D7D !important; 

这应该做到这一点。

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

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

 "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。

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

使用JQuery作为

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

使用JavaScript。

例如:

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