5

标题说明了大部分内容。是否有!important在更高级别覆盖的 CSS 关键字，或者在任何较新的 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内联样式还是绝对没有可能？

4

6 回答 6

4

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

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

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

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

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

    添加!important2将在全球范围内陷入糟糕的编码习惯。这将是 W3C 发出的信号，表明一切都会发生。

    您还打开了 , 等的门!important3。!important4它在哪里结束？

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

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

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

    如果你的想法变成了现实，并且有更高的水平!important，比如说上升到!important10，猜猜那个人会用什么？而且您仍然会遇到同样的问题，但您会在这里询问是否有任何计划!important11。

于 2017-02-08T19:41:08.457 回答
4

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

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

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

于 2017-02-08T20:45:01.430 回答
2

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

.blue[style]{
  color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>

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

于 2017-02-08T19:04:21.587 回答
0

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

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

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

于 2017-02-08T18:56:23.437 回答
0

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

尝试将元素样式设置得越具体。也许使用：

 #bluebeaver span {}

看看这个链接：CSS 特异性：你应该知道的事情

于 2017-02-08T19:00:44.740 回答
0

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

它应该只用于页面/应用程序工作所必需的样式，而不是预期会改变的东西。

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

于 2017-02-08T19:04:45.193 回答