使用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;">

只需style从HTML中删除该属性即可.

Answer 4

当然 !important 技巧在这里是决定性的，但更具体的定位不仅可以帮助实际应用您的覆盖（权重标准可以支配 !important），还可以避免覆盖意外元素。

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

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

使用！important将通过CSS（如Change）覆盖element.style

color: #7D7D7D;

至

color: #7D7D7D !important;

那应该做。