比 !important 更重要（更高级别的 !important）？

Question

标题说明了大部分内容。是否有 CSS 关键字在更高级别覆盖 !important 或是否有任何更新的 CSS 规范中计划的类似功能？

当然，我知道 !important 有点可能被新手使用，而且在很多情况下这不是最好的方法，因为如果写得不好，样式表可能真的很糟糕。然而，有时它是有用的，甚至是需要的。

我能想到的 CSS 中最强的样式是 !important 的内联样式，如下所示：

<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>

现在假设我无法编辑 HTML 并且必须从外部样式表修改样式。

如果有这样的东西真的很棒：

#bluebeaver {
    color: blue !important 2;
}

如果他们有级别，例如 z-index。

是否有任何解决方案或计划使用更新的 CSS 规范的任何解决方案？到目前为止我没有找到任何东西。

你能展示一个 CSS 解决方案来覆盖 !important 内联样式吗？还是绝对不可能？

Answer 1

您可以使用 javascript 修改 HTML 元素的颜色。

document.getElementById('bluebeaver').style.color=blue;

演示：https://jsfiddle.net/041fhz07/

Answer 2

尝试特异性：如果两个选择器应用于同一元素，则特异性较高的选择器获胜。

尝试为您的元素设置更具体的样式。也许使用：

 #bluebeaver span {}

看看这个link：CSS Specificity: Things You Should Know

Answer 3

我所知道的最高顺序是定位应用了内联样式的元素。实际上，您可以 select 元素的 style 数据属性 CSS select 或覆盖其样式！看看这个：

.blue[style]{
  color:blue !important;
}

<div class="blue" style="color:red;">SO VERY IMPORTANT</div>

当然你甚至可以通过专门针对样式来获得更具体的内容，例如.blue[style="color:red;"]。

Answer 4

如果您只想使用 CSS，您只需使用 !important 声明新样式，最后的 "important" 获胜。尽管除非完全必要，否则我首先会避免使用它。

它应该只用于 page/app 工作所必需的样式，而不是预期会改变的样式。

另一种解决方法是在不想改变CSS本身时，使用JS去掉and/or添加classes/id来改变元素的样式。

Answer 5

只需使用 JavaScript:

从元素中删除 style 属性

document.getElementById("bluebeaver").removeAttribute('style');

然后使用您的外部样式表来应用任何您想要的 CSS。

创建更高级别的 !important 不是一个好主意的两个原因：

开了一个不好的先例。

添加 !important2 会在全球范围内屈服于 poor-coding 习惯。这将是 W3C 发送一个信号，表明一切正常。

你也打开了通往!important3、!important4等的大门，它的尽头在哪里？

降低标准和期望并不是行业进步的好方法。
可能连你的问题都解决不了

考虑一下：将内联样式设置为 color: red !important 的人显然希望该规则具有最高优先级。

如果您的想法成为现实，并且有更高级别的 !important，比方说上升到 !important10，猜猜那个人会用什么？你仍然会遇到同样的问题，但你会在这里询问是否有 !important11.

Answer 6

不，没有关键字或其他方法比 !important 更重要的声明。没有已知的 activity 来改变这个。

一般来说，可以使用同样具有 !important 且具有更高特异性的规则来覆盖具有 !important 的声明。但是，根据定义，style 属性中的声明比任何其他作者声明具有更高的特异性。在 CSS 中打败它的唯一方法是使用 user 样式 sheet 和 !important.

有non-CSS个解决方案，但是比较明显，比如用JavaScript简单的删除或修改style属性

Answer 7

div.prop1.imp1.imp2 {
  background-color: red !important;
}

div.prop1 {
  background-color: black;
}

div.prop1.imp1 {
  background-color: white !important;
}

如果您不能这样做，因为并非所有元素在 JavaScript 的列表中都有 .imp1 class，并且您要通过单击按钮 (.小鬼2）。您可以指定 'more important' .imp2 class 上面带有 !important 的其他内容。

这使得带有附加 imp2 class 的属性比 .prop1.imp1 样式更重要，因为它首先在 css.

中加载

比 !important 更重要（更高级别的 !important）？

More important than !important (a higher level !important)?

html

css

css-cascade