如果您有
<div style="display: none !important;"></div>
有没有一种方法可以在样式表中覆盖它以使其显示?最好使用类似于这个的东西:div { display: block !important; }
如果您有
<div style="display: none !important;"></div>
有没有一种方法可以在样式表中覆盖它以使其显示?最好使用类似于这个的东西:div { display: block !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>
!important
声明不会改变特异性,而是优先于“普通”声明。!important
标志时,特异性规定内联规则被应用-意味着对于OP的情况,没有办法覆盖内联!important
。!important
内联样式,而对此我的回答并未涉及。因此需要强调,问题只涉及如何覆盖!important
内联样式。 - BoltClock如果内联 CSS 带有 !important
,则无法覆盖它。它的优先级高于外部 CSS 文件中的样式。
但是,如果您以后想要更改某些操作,可以使用一些 JavaScript。
由于内联 CSS 使用了 !important
,因此您无法覆盖它,因为它具有更高的优先级。但是,使用 JavaScript,您可以实现想要的效果。
无法覆盖带有 !important
的内联样式。首选是内联样式。
例如:我们有一个类
.styleT{float:left;padding-left:4px;width:90px;}
and in jsp
<div class="styleT" id="inputT" style="padding-left:0px;">
这里不使用 padding-left:4px;
。除了 padding-left:4px;,它使用的是 class styleT
。
将会有 padding-left:0px;
。
$(document).ready(function() {
$('div').css('display','block');
})
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>
你看到了,内联样式已被删除,现在id选择器是最强的选择器!
最初的回答:
当两个CSS属性应用于同一节点时,优先级规则如下:
!important
比非 !important
高。如果两者同等重要...
在文件中的 style
属性比 CSS 更高。如果两者都在 CSS 文件中...
CSS 选择器中的 ID 比没有 ID 的选择器高。并且越多的 ID 比较少的 ID 更高(你可能认为选择器中有两个 ID 没有任何意义,但实际上是有原因的)。如果 ID 数量相同...
类或选择器中的属性(比如 [name]
),数目越多越高。如果它们都相同...
像 span
或 input
这样的标签名称,数量越多越高。
所以你看到内联的 !important
具有最高的优先级。
querySelector()
方法。将脚本行放在div
块的下方。
<div style="display: none !important;">Your div display block</div>
<script>
document.querySelector('[style="display: none !important;"]').style.display="block";
</script>
display: block !important
可以使用visibility: hidden;
。无论如何,这与问题无关,只是想分享一下。 - user3364767