比 !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

不，没有任何关键字或其他方法可以使声明比 更重要!important。没有已知的活动可以改变这一点。

一般来说，可以!important通过使用也具有该声明且具有更高特异性的规则来覆盖具有该声明的声明。style然而，根据定义，属性中的声明比任何其他作者声明具有更高的特异性。在 CSS 中击败它的唯一方法是使用带有!important.

有非 CSS 解决方案，但它们相当明显，例如使用 JavaScript 简单地删除或修改属性style。

Answer 2

style只需使用 JavaScript 从元素中删除该属性即可：

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

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

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

1. 这开了一个不好的先例。

   添加!important2将在全球范围内屈服于不良编码习惯。W3C 会发出一个信号，表示一切顺利。

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

   降低标准和期望并不是行业进步的好方法。
   
   

2. 它甚至可能无法解决您的问题。

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

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