使用CSS覆盖element.style

Question

我有一个来自页面构建器的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

当然，重要的伎俩在这里具有决定性作用，但更具体的定位可能不仅有助于实际应用覆盖（权重标准可以统治！重要），还可以避免覆盖非预期的元素。

使用浏览器的开发人员工具，确定违规样式属性的确切值; e.g：

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

或

"display: block;"

然后，决定要覆盖哪个选择器分支;您可以扩大或缩小您的选择以满足您的需求，例如：

p span

或

section.article-into.clearfix p span

最后，在custom.css中，使用[attribute ^ = value]选择器和！important声明：

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

请注意，您不必引用整个样式属性值，只需足以明确匹配字符串。

Answer 6

根据我的知识，内联样式首先出现，所以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";
}

Answer 8

您可以通过引用元素样式的违规属性来覆盖CSS上的样式。在我的情况下，这两个代码设置为15px，导致我的背景图像变黑。因此，我用0px覆盖它们并放置！important，因此它将是优先级

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}