blocks|key|376374|text|尽管它通常不受欢迎，但从技术上讲，您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|376375|display:+inline+!important;|code-block|syntax|javascript|376376|这通常不是一个好的实践，但在某些情况下可能是必要的。您应该做的是编辑代码，这样一开始就不会将样式应用于<li>元素。|offset|length|style|CODE|376377|entityMap^0|0|0|1F|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Although it's often frowned upon, you can technically use:

<pre><code>display: inline !important;
</code></pre>

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <code>&lt;li&gt;</code> elements in the first place.

blocks|key|376504|text|这个CSS甚至会覆盖JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|376505|#demofour+li[style]+{
++++display:+inline+!important;
}+|code-block|syntax|javascript|376506|或者只针对第一个|376507|#demofour+li[style]:first-child+{
++++display:+inline+!important;
}|376508|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This CSS will overwrite even the JavaScript:

<pre><code>#demofour li[style] {
 display: inline !important;
} 
</code></pre>

or for only first one

<pre><code>#demofour li[style]:first-child {
 display: inline !important;
}
</code></pre>

blocks|key|376390|text|element.style来自于标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|376391|<li+style="display:+none;">|code-block|syntax|javascript|376392|只需从HTML中删除style属性。|376393|entityMap^0|0|D|0|0|A|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<code>element.style</code> comes from the markup.

<pre><code>&lt;li style="display: none;"&gt;
</code></pre>

Just remove the <code>style</code> attribute from the HTML.

blocks|key|376575|text|当然，重要的技巧在这里是决定性的，但更具体的目标可能不仅有助于实际应用您的覆盖(权重标准可以控制！重要)，而且还可以避免覆盖非预期的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|376576|使用浏览器的开发人员工具，确定有问题的样式属性的确切值；例如：|376577|"font-family:+arial,+helvetica,+sans-serif;"|code-block|syntax|javascript|376578|或|376579|"display:+block;"|376580|然后，决定您将覆盖哪个选择器分支；您可以扩大或缩小您的选择范围以满足您的需求，例如：|376581|p+span|376582|376583|section.article-into.clearfix+p+span|376584|最后，在您的custom.css中，使用attribute%5E=value选择器和!important声明：|376585|p+span[style%5E="font-family:+arial"]+{
++font-family:+"Times+New+Roman",+Times,+serif+!important;
}|376586|注您不必引用整个style属性值，只要足够明确地匹配字符串即可。|376587|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|Q|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|S|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|T|3|U|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|W|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|X|3|Y|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

Of course the !important trick is decisive here, but targeting more specifically may help not only to have your override actually applied (weight criteria can rule over !important) but also to avoid overriding unintended elements.

With the developer tools of your browser, identify the exact value of the offending style attribute; e.g.:

<pre><code>"font-family: arial, helvetica, sans-serif;"
</code></pre>

or

<pre><code>"display: block;"
</code></pre>

Then, decide which branch of selectors you will override; you can broaden or narrow your choice to fit your needs, e.g.:

<pre><code>p span
</code></pre>

or

<pre><code>section.article-into.clearfix p span
</code></pre>

Finally, in your custom.css, use the [attribute^=value] selector and the !important declaration:

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

Note you don't have to quote the whole style attribute value, just enough to unambigously match the string.

blocks|key|158575|text|使用!important将通过类似更改的CSS覆盖element.style|type|unstyled|depth|inlineStyleRanges|entityRanges|data|158576|color:+#7D7D7D;|code-block|syntax|javascript|158577|至|158578|color:+#7D7D7D+!important;|158579|这应该就行了。|158580|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Using !important will override element.style via CSS like
Change

<pre><code>color: #7D7D7D;
</code></pre>

to

<pre><code>color: #7D7D7D !important;
</code></pre>

That should do it.

blocks|key|376632|text|可以通过引用元素样式的有问题的属性来重写css上的样式。在我的例子中，这两个代码被设置为15px，并导致我的背景图像变黑。因此，我用0px覆盖了它们，并将！放在了重要位置，因此它将是优先级|type|unstyled|depth|inlineStyleRanges|entityRanges|data|376633|.content+{
++++border-bottom-left-radius:+0px+!important;
+++++border-bottom-right-radius:+0px+!important;
}|code-block|syntax|javascript|376634|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can override the style on your css by referencing the offending property of the element style. On my case these two codes are set as 15px and is causing my background image to go black. So, i override them with 0px and placed the !important so it will be priority

<pre><code>.content {
 border-bottom-left-radius: 0px !important;
 border-bottom-right-radius: 0px !important;
}
</code></pre>

blocks|key|158527|text|据我所知，内联sytle是第一位的，所以css类不应该工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|158528|使用Jquery作为|158529|$(document).ready(function(){
+++$("#demoFour+li").css("display","inline");
});|code-block|syntax|javascript|158530|您也可以尝试|158531|#demoFour+li+{+display:inline+!important;}|158532|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

As per my knowledge Inline sytle comes first so css class should not work.
Use Jquery as
<pre><code>$(document).ready(function(){
 $(&quot;#demoFour li&quot;).css(&quot;display&quot;,&quot;inline&quot;);
});
</code></pre>
You can also try
<pre><code>#demoFour li { display:inline !important;}
</code></pre>

blocks|key|158537|text|使用JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|158538|例如：|158539|var+elements+=+document.getElementById("demoFour").getElementsByTagName("li");
for+(var+i+=+0;+i+<+elements.length;+i%2B%2B)+{
++++elements[i].style.display+=+"inline";
}|code-block|syntax|javascript|158540|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use JavaScript.

For example:

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

I have an HTML page from page builder, and it injects <code>style</code> attribute directly to the element. I found it's considered as <code>element.style</code>.

I want to override it using CSS. I can match the element, but it doesn't override it.

<img src="https://i.stack.imgur.com/PD1wt.png" alt="screenshot">

How can I override the style using CSS?

Override element.style using CSS

我有一个来自页面生成器的超文本标记语言页面，它将style属性直接注入到元素中。我发现它被认为是element.style。我想用CSS覆盖它。我可以匹配元素，但它不会覆盖它。​​如何使用CSS覆盖样式？

问使用CSS覆盖element.style
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS覆盖element.styleEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS覆盖element.style
EN