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的声明，该规则也具有更高的特异性。但是，根据定义，!important属性中的声明具有比任何其他作者声明更高的特异性。打败它的唯一方法是在CSS中使用带有style的用户样式表。

有非CSS解决方案，但它们相当明显，例如使用JavaScript来简单地删除或修改riot.tag2('test', '<input type="text" name="username" placeholder="username" oninput={validate} value="" /> <h4>{username_valid}</h4>', '', '', function(opts) { this.validate = function(e) { this.username_valid = (this.username.value.length > 3) ? 'Valid' : 'Invalid' }; });属性。

Answer 2

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

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

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

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

这是一个不好的先例。

在全球范围内添加!important2将会导致编码习惯不佳。这将是W3C发出任何信号的信号。

您还打开了通往!important3，!important4等的大门。它在哪里结束？

降低标准和期望并不是行业取得进步的好方法。
它甚至可能无法解决您的问题。

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

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

Answer 3

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

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

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

Answer 4

尝试特异性：如果两个选择器适用于同一个元素，那么具有更高特异性的元素将获胜。

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

 #bluebeaver span {}

请看这个链接：CSS Specificity: Things You Should Know

Answer 5

我所知道的最高顺序是定位已应用内联样式的元素。您实际上可以在CSS选择器中选择元素的style数据属性来覆盖它的样式！看看这个：

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

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

当然，您可以通过专门定位样式来更具体，例如.blue[style="color:red;"]。

Answer 6

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

它只应用于页面/应用程序工作所必需的样式，而不是预期会发生变化的样式。

另一种解决方案是使用JS删除和/或添加classes / id，以便在不想更改CSS本身时更改元素的样式。

比重要更重要（更高层次！重要）？

6 个答案: