Html 我可以覆盖内联 !important 吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11150684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:12:10  来源:igfitidea点击:

Can I override inline !important?

htmlcsscss-specificity

提问by Jeffrey Basurto

If you have

如果你有

<div style="display: none !important;"></div>

Is there a way to override that in the style sheet to make it displayed?

有没有办法在样式表中覆盖它以使其显示?

Preferably using something similar to this:

最好使用类似的东西:

div { display: block !important; }

回答by o.v.

Let me begin by saying that generally inline styles canbe overridden:

首先让我说一般内联样式可以被覆盖

.override {color:red !important;}?

.override {color:red !important;}?

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

Fiddled

摆弄

This behavior is described in W3 specs, where it is stated that !importantdeclarations do not alter the specificity, but rather take precedenceover "normal" declarations.

W3 规范中描述这种行为,其中!important声明声明不会改变特异性,而是优先于“正常”声明。

That being said, when conflicting rules both have the !importantflag, specificity dictates that an inline rule is applied - meaning that for OP's scenario, there's no way to override an inline!important.

话虽如此,当冲突规则都具有!important标志时,特殊性决定应用内联规则 - 这意味着对于 OP 的场景,无法覆盖内联!important.

回答by Shakti Singh

You cannot override inline CSS if it has !important. It has higher precedence than the style in your external CSS file.

如果内联 CSS 具有!important. 它的优先级高于外部 CSS 文件中的样式。

However, if you want it to change some actions later on, you can use a bit of JavaScript.

但是,如果您希望它稍后更改某些操作,则可以使用一些 JavaScript。

回答by Ahsan Rathod

You can not override inline CSS having !important, because it has higher precedence, but, using JavaScript, you can achieve what you want.

您不能覆盖具有 的内联 CSS !important,因为它具有更高的优先级,但是,使用 JavaScript,您可以实现您想要的。

回答by ?ll?ll? l? ?ll?ll?

You cannot override inline style having !important. First preference is inline style.

您不能覆盖具有!important. 首选是内联样式。

For eg: we have a class

例如:我们有一个班级

.styleT{float:left;padding-left:4px;width:90px;}

and in jsp

并在jsp中

<div class="styleT" id="inputT" style="padding-left:0px;">

here doesn't take the padding-left:4px;.It takes class styleTexcept the padding-left:4px;. There will be padding-left:0px;.

这里不使用padding-left:4px;.It 类,styleT除了 padding-left:4px;。会有padding-left:0px;

回答by sameeuor

Here is a simple jQuery solution.

这是一个简单的 jQuery 解决方案。

$(document).ready(function() { 
$('div').css('display','block');
})

回答by Freelancer

You can see this example! There are several rules for CSS selector. The strongest selector is inline (if same level with/without !important). Next ones: id, class, etc. So if a tag is already stylized by inline css with !important, you just have a way: use Javascript to change.

你可以看看这个例子!CSS 选择器有几个规则。最强的选择器是内联的(如果有/没有 !important 的级别相同)。下一个:id、class 等。所以如果一个标签已经被带有 !important 的内联 css 风格化了,那么你只有一种方法:使用 Javascript 进行更改。

var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
  pid.style.color = '';
});
p{color:violet !important;}

*{color:blue !important;}

html *{color:brown !important;}

html p{color:lighblue !important;}

.pclass{color:yellow !important;}

#pid{color:green !important;}
<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>

<button id='button'>Change color by JS</button>

As you see, the style by inline css was removed and the id is the strongest selector now !

如您所见,inline css 的样式已被删除,现在 id 是最强的选择器!

回答by OsamaBinLogin

Precedence rules when two CSS properties apply to the same node:

当两个 CSS 属性应用于同一个节点时的优先规则:

  • !importantbeats not-!important. If equally !important, ...

  • styleattribute beats css in a file. If both are in css files...

  • an ID in the CSS selector beats no ID. And more IDs beat less. (and you thought there was no reason for two IDs in a selector.) If same ID count...

  • Classes, or attributes like [name]in the selector, count them; more beats less. If all those are the same...

  • tag names like spanor input, more beats less.

  • !important胜过不- !important。如果同样重要,...

  • style属性在文件中胜过 css。如果两者都在 css 文件中...

  • CSS 选择器中的 ID 胜过没有 ID。并且更多的 ID 击败的更少。(并且您认为选择器中没有两个 ID 的理由。)如果相同的 ID 计数......

  • [name]选择器中的类或属性,计算它们;更多击败更少。如果所有这些都一样......

  • 标签名称如spanor input,越多越好。

So you see the inline !importantis the highest precedence.

所以你看到内联!important是最高优先级。