Question

如果你有

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

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

最好使用类似的东西：

div { display: block !important; }

Answer 1

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

.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

此行为描述为in W3 specs，其中声明!important声明不会改变特异性，而是优先于而非“正常”声明。

话虽如此，当冲突的规则都有!important标志时，特异性规定应用内联规则 - 这意味着对于OP的情况，没有办法覆盖内联 { {1}}。

Answer 2

如果内联CSS有!important，则无法覆盖它。它的优先级高于外部CSS文件中的样式。

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

Answer 3

您无法覆盖具有!important的内联CSS，因为它具有更高的优先级，但是，使用JavaScript，您可以实现您想要的效果。

Answer 4

您无法覆盖!important的内联样式。首选是内联风格。

例如：我们有一个班级

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

和jsp

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

此处不接受padding-left:4px;。除了padding-left：4px;之外，它需要等级styleT。会有padding-left:0px;。

Answer 5

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

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

Answer 6

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

!important胜过-!important。如果同样重要！...
style属性在文件中胜过CSS。如果两者都在css文件中...
CSS选择器中的ID不打败ID。越多ID越少。（并且您认为选择器中没有两个ID的原因。）如果ID计数相同...
类或选择器中的属性[name]，对它们进行计数；多拍少。如果所有这些都相同...
像span或input这样的标签名称，节拍越多。

因此，您看到内联!important是最高优先级。

Answer 7

您可以看到此示例！ CSS选择器有几个规则。最强的选择器是内联的（如果具有或不具有！important的级别相同）。接下来的是：id，class等。因此，如果已经使用内联css使用！important对标签进行了样式化，则只有一种方法：使用Java脚本进行更改。

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>

如您所见，内联css的样式已删除，并且id现在是最强的选择器！

我可以覆盖内联！重要吗？

7 个答案: