我可以覆盖内联样式中的!important吗？

Question

如果您有

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

有没有一种方法可以在样式表中覆盖它以使其显示？最好使用类似于这个的东西：

div { display: block !important; }

- Jeffrey Basurto

---

覆盖 display: block !important 可以使用 visibility: hidden;。无论如何，这与问题无关，只是想分享一下。 - user3364767

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规范中有所描述在W3规范中,其中指出!important声明不会改变特异性，而是优先于“普通”声明。

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

- Oleg

---

请仔细阅读，原帖明确指出“inline !important”。不过还是要为好的回答点个赞。 - Christoph

@Christoph：但是答案明确地说明“您无法覆盖内联CSS”，“内联具有更高的优先级”……这是错误的，因此我的回答原始措辞是正确的。我不指望每个人都编辑他们的答案来纠正这个错误。 - Oleg

您的问题是关于如何覆盖!important内联样式，而对此我的回答并未涉及。因此需要强调，问题只涉及如何覆盖!important内联样式。 - BoltClock

@BoltClock：嗯，我确实说过没有办法覆盖内联important（除非使用用户样式，但这超出了OP的控制范围）。我担心其他答案中使用的措辞会暗示无法覆盖原始内联规则。 - Oleg

最后一句话不太正确。如果用户的浏览器有一个自定义的CSS规则，其中包含!important，那么它将覆盖甚至是带有!important的内联CSS规则。因此，唯一的方法是在浏览器中为特定（类型的）元素设置一个带有!important的自定义CSS规则。 - Kai Lehmann

Answer 2

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

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

- Shakti Singh

---

不能使用JavaScript，因为它是用于电子邮件的。 - Jeffrey Basurto

Answer 3

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

- Ahsan Rathod

---

啊，太棒了，所以我不需要内联重要的东西，因为无论我内联什么，都会覆盖掉原有的类。太好了！ - undefined

Answer 4

无法覆盖带有 !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;。

- ıllıllı lק ıllıllı

Answer 5

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

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

- sameeuor

Answer 6

你可以看到这个例子！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>

你看到了，内联样式已被删除，现在id选择器是最强的选择器！

最初的回答：

- Freelancer

Answer 7

当两个CSS属性应用于同一节点时，优先级规则如下：

• !important 比非 !important 高。如果两者同等重要...

• 在文件中的 style 属性比 CSS 更高。如果两者都在 CSS 文件中...

• CSS 选择器中的 ID 比没有 ID 的选择器高。并且越多的 ID 比较少的 ID 更高（你可能认为选择器中有两个 ID 没有任何意义，但实际上是有原因的）。如果 ID 数量相同...

• 类或选择器中的属性（比如 [name]），数目越多越高。如果它们都相同...

• 像 span 或 input 这样的标签名称，数量越多越高。

所以你看到内联的 !important 具有最高的优先级。

- OsamaBinLogin

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>

- Arsen