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

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>

此行为在 W3 规范中进行了描述，其中指出

!important

声明不会改变特异性，而是优先于“正常”声明。

话虽如此，当冲突的规则都具有

!important

标志时，特殊性决定应用内联规则 - 这意味着对于 OP 的场景，无法覆盖 inline

!important

。

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 选择器有几个规则。最强的选择器是内联的（如果相同级别有/没有！重要）。接下来是：id、class 等。因此，如果标签已经通过内联 css 和 !important 进行了样式化，那么您只有一个方法：使用 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>

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

Answer 7

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

• !important

  胜过-

  !important

  。如果同样重要，...

• style

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

• CSS 选择器中的 ID 胜过没有 ID。而且 ID 越多，击败的次数就越少。 （并且您认为选择器中没有理由有两个 ID。）如果相同的 ID 计数...

• 类，或者选择器中的

  [name]

  之类的属性，对它们进行计数；更多节拍更少。如果这些都一样的话...

• 标签名称如

  span

  或

  input

  ，更多节拍更少。

所以你看到内联

!important

是最高优先级。

Answer 8

您无法在样式表中覆盖它。 JS 会对你的情况有所帮助。例如，

querySelector()

方法。将脚本行放在块

div

下方。

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

<script>
document.querySelector('[style="display: none !important;"]').style.display="block";
</script>