在CSS中使用“！important”有什么含义？

Z时代
2024-01-10
分类：问答

我已经在网站上工作了几个月，很多次尝试编辑某些东西时，都必须使用!important，例如：

div.myDiv { 
    width: 400px !important;
}

为了使其按预期显示。这是不好的做法吗？还是!important可以使用该命令？这会导致任何意外的后果吗？

回答：

是的，我想说您的使用示例!important是不好的做法，很可能会进一步导致不良后果。但这并不意味着永远都不能使用。

有什么问题`!important`：

当浏览器决定CSS如何影响页面时，特异性是起作用的主要力量之一。选择器越具体，对其添加的重要性就越高。这通常与所选元素出现的频率一致。例如：

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

在此页面上，所有按钮均为黑色。除了“highlight”类的按钮是蓝色的。除了ID为“buyNow”的唯一按钮（绿色）之外。整个规则的重要性（在这种情况下为颜色和字体大小）由选择器的特殊性来管理。

但是，是在属性级别而非选择器级别添加的。例如，如果我们使用以下规则：

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

那么color属性的重要性就比font-size更高。实际上，颜色比button#buyNow选择器中的颜色更重要，而不是字体大小（字体大小仍由常规ID与类的特定性决定）。

元素<button class="highlight" id="buyNow">的字体大小为2em，但颜色为color blue。

这意味着两件事：

选择器无法准确传达其中所有规则的重要性

覆盖蓝色的唯一方法是使用 另一个!important声明，例如在button#buyNow选择器中。

这不仅使样式表难以维护和调试，而且还产生滚雪球效应。一个!important导致另一个覆盖它，另一个导致另一个覆盖等等。它几乎永远不会只停留一个。即使!important是一个有用的短期解决方案，但从长远来看，它会再次吸引您。

什么时候可以使用：

用户样式表中的替代样式。

这就是!important最初发明的目的：为用户提供一种替代网站样式的方法。辅助功能工具（例如屏幕阅读器，广告拦截器等）已广泛使用它。

覆盖第三方代码和内联样式。

通常，我会说这是一种代码异味的情况，但是有时您别无选择。作为开发人员，您应该致力于对代码进行尽可能多的控制，但是在某些情况下，您的双手被束缚住了，您只需要使用现有的东西即可。使用!important谨慎。

实用程序类

许多图书馆和框架配备了实用工具类喜欢.hidden，.error或.clearfix。它们仅用于一个目的，并且通常仅应用很少但非常重要的规则。（例如，display:none对于一个.hidden班级）。这些应该覆盖元素上当前使用的所有其他样式，!important如果您问我，肯定可以保证。