Html “使用”的含义是什么；！“重要的”；在CSS中？

我在一个网站上工作了几个月，很多时候当我试图编辑一些东西时，我不得不使用

！重要信息

，例如：

---

以使其按预期显示。这是坏习惯吗？或者是

！重要信息

命令可以使用吗？这会不会导致更进一步的不希望发生的事情

！重要信息

强制始终应用该语句，执行以下操作：

• 即使选择器的特异性较低，级别较低，但它现在也比更高的特异性选择器强
• 如果该语句的进一步出现通常会覆盖该语句，则它不再覆盖重要语句

大多数时候，

！重要信息

可以避免，因为选择器的特殊性处理哪种选择器有效，这就是级联样式的概念。然而，在某些情况下（不太记得确切的情况），特殊性没有那么合乎逻辑，我不得不强制

！重要信息

，请参见声明

不使用/避免

的原因！重要信息

• 防止用户使用自定义样式表（现在无法覆盖标记为重要的规则），这会破坏某些人的可访问性
• 使代码更难阅读，因为大脑通常很容易理解特定性，但记住什么是

  ！重要信息

  使其更难阅读

---

我不会建议您使用它，除非它是必要的，因为您正在处理一个现有的项目，有时可能是这样但是尽量远离它，尽量少用！尽可能重要。

问题是，如果您使用了太多它们，那么其中一个可能会在不经意间覆盖另一个。您的代码也不太清晰，任何在您之后维护此代码的人都会撕开他/她的头发，就像试图找到它一样！重要的是，每次在CSS中执行某些操作都是非常痛苦的

---

检查此项：

是的，我会说您使用

的示例！重要提示

是一种不好的做法，很可能会进一步导致不良影响。但这并不意味着它永远不会好用

有什么问题吗！重要信息

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

按钮{
颜色：黑色；
}
button.highlight{
颜色：蓝色；
字号：1.5em；
}
按钮#立即购买{
颜色：绿色；
字号：2em；
}

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

！重要信息

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

button.highlight{
颜色：蓝色！重要；
字号：1.5em；
}

那么颜色属性的重要性将高于字体大小。事实上，颜色比

按钮#buyNow

选择器中的颜色更重要，而不是字体大小（字体大小仍然由常规ID和类别特异性决定）

元素

的字体大小为

2em

，但颜色为

蓝色

这意味着两件事：

选择器不能准确地传达其中所有规则的重要性
覆盖蓝色的唯一方法是使用另一种
！重要的
声明，例如在
按钮#立即购买
选择器中
这不仅使样式表更难维护和调试，而且会产生滚雪球效应。一个
！重要信息
导致另一个用户覆盖它，另一个用户覆盖它，等等。它几乎从来不会只和一个人呆在一起。即使一个
！重要信息
可能是一个有用的短期解决方案，但从长远来看，它会反过来咬你的屁股

什么时候可以使用：

覆盖用户样式表中的样式

这就是
！重要信息
的发明首先是为了：给用户一种覆盖网站样式的方法。它经常被屏幕阅读器、广告拦截器等辅助工具使用


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

一般来说，我会说这是一个代码气味的情况，但有时你只是没有选择。作为一名开发人员，您应该尽可能多地控制代码，但在有些情况下，您的双手被束缚，您只需要处理现有的任何东西。使用
！重要信息
请谨慎使用


实用程序类

许多库和框架都附带了实用程序类，如
.hidden
、
.error
或
.clearfix
。它们只有一个目的，而且通常应用很少但非常重要的规则。（
display:none
用于
.hidden
类，例如）。这些样式应该覆盖元素上当前的任何其他样式，并且绝对保证
！重要信息
，如果你问我的话

结论
使用
！重要的
声明通常被认为是不好的做法，因为它的副作用扰乱了CSS的核心机制之一：特异性。在许多情况下，使用它可能表明CSS架构很差

在某些情况下，它是可以接受的，甚至是首选的，但在使用它之前，请确保您仔细检查其中一种情况是否确实适用于您的情况。
对于我来说，请使用
！重要提示
是一种糟糕的CSS做法。它破坏了appl中的自然流动
div.myDiv { 
    width: 400px !important;
}

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

...
background-color: white !important;   
color: black !important;
...

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }