css - 使用 CSS 覆盖 element.style

Question

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

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

如何使用 CSS 覆盖样式？

score 133 · Accepted Answer

虽然它经常不受欢迎，但您可以在技术上使用：

display: inline !important;

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

score 21 · Accepted Answer

这个 CSS 甚至会覆盖 JavaScript：

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

或仅用于第一个

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

score 12 · Accepted Answer

element.style来自标记。

<li style="display: none;">

只需style从 HTML 中删除该属性。

score 6 · Accepted Answer

当然 !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;
}

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

score 5 · Accepted Answer

使用 !important 将通过 CSS 覆盖 element.style，例如 Change

color: #7D7D7D;

至

color: #7D7D7D !important;

那应该这样做。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

使用 JavaScript。

例如：

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

score 0 · Accepted Answer

据我所知，内联样式是第一位的，所以 css 类不应该工作。

使用 Jquery 作为

$(document).ready(function(){
   $("#demoFour li").css("display","inline");
});

你也可以试试

#demoFour li { display:inline !important;}

css - 使用 CSS 覆盖 element.style

8 回答 8

Related

Reference