CSS 中最有用和最有争议的元素之一是 ！重要的 财产。 每个设计师都会在某个时候遇到 CSS 代码中的标签。 发生这种情况时出现的真正问题和困境是“使用正确吗？” 因为 CSS ！重要的 如此强大的工具，开发人员和设计人员在使用它时需要注意最佳实践。 CSS !important 会导致各种意大利面条式代码，这对任何人都不利。
什么是 CSS 重要？
这 ！重要的 CSS 中的属性表示它所附加的任何规则都优先于其他规则。 它是与它一起使用的元素和选择器的最高优先级，因此让开发人员和设计人员可以对网站各个部分的样式进行特定控制。 在大多数情况下，这意味着覆盖包含在 样式.css 或者 自定义.css.
!important 的每个实例仅适用于它出现的特定行. 因此，您可以在片段的某些部分（但不是全部）上使用该属性。 CSS 代码 ！重要的 看起来像这样：
.example-class {
color:#fff!important;
}
要记住的首要事项 ！重要的 有两个方面：
- 这个单词 重要的 必须始终以感叹号开头 （！）
- 分号必须始终位于 行尾，在 !important 声明之后
！重要的 如果您愿意，甚至可以逐页或逐个模块地使用（在像 Divi 这样的页面构建器的情况下）——尽管这就是您进入意大利面条代码的方式，该代码覆盖了哪个页面上的哪个元素并按什么顺序？
每个设计师在某些时候都会遇到 CSS 重要标签，并且必须做出决定。 这值得覆盖网站的默认样式吗？
有时，答案是肯定的。 其他时候，这是一个硬性规定。 让我们看一下 CSS 的一些最佳实践，以了解它何时可能不会破坏任何东西，无论是现在还是将来。
何时使用 CSS 重要
主要（也是最广泛接受的）使用 ！重要的 当您希望与主要选择器交互的类具有不同的样式时。 也许你想要 标题标题 和 元信息 在您的博客上使用与您网站其余部分不同的字体和颜色。 这些元素的默认样式继承自 h1 和 p CSS 文件中的选择器。 无论您在您的网站中为站点默认设置什么 .css 文件或 WordPress 主题定制器将显示。
p {
font-weight: 400;
font-size: 1.1rem;
line-height: 1.7;
color: #111;
font-family:'Roboto';
}
h1 {
margin-top: 30px;
margin-bottom: 15px;
color: #000;
font-family:'Lato';
}
您可以使用 classes 更改所需的单个元素（博客文章标题和元信息）。条目标题 和 .post-meta。 既然你希望他们仍然继承 一些 来自父级的样式 h1 和 p，你将使用 h1.entry-title 和 p.post-meta 专门调用这些。
h1.entry-title, p.post-meta {
color: white!important;
font-family:'Poppins'!important;
}
将这些片段放在同一个样式表中将导致顶部代码在所有情况下都生效 除了 当显示帖子标题和帖子元时。 CSS 重要属性会覆盖默认值，让您可以很好地控制它。
这种个性化定制是主要用途 ！重要的. 但不是唯一的。
使用重要的 CSS 来保护类、ID 和元素
你也可以使用 ！重要的 为了使您的页面的各种元素过时，网站上的进一步开发可能会以意想不到的方式进行调整。 例如，您可以为订阅框或电子邮件选择加入或 YouTube 嵌入开发特定样式。 其中每一个都可能从不同位置的样式表中继承不同的样式。 使用 ！重要的 标签可以做到这一点，因此需要故意改变表单或按钮的样式。
只需用类或 ID 命名元素，然后放入 ！重要的 在每一行。
.youtube-embed {
font-family:'Exo'!important;
font-weight: 700!important;
line-height:1.4rem!important;
margin-top:25px!important;
margin-left:auto!important;
margin-right:auto!important
color:#449928!important;
padding:11px!important;
background:#998899;
}
瞧！ 样式表中的定期更改是面向未来的。
使用内联样式
这是许多人可能会或可能不会出现的用例之一。 它曾经很常见，但随着我们不再手动编码我们的帖子和页面，它变得越来越少。 但是，如果您曾经深入研究过 Gutenberg 块的 HTML 或 WordPress 经典编辑器的文本视图，您绝对可以使用 ！重要的 使用内联 CSS 样式。
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
这很重要，有几个原因。 第一个是您可以通过使用专门控制页面中的任何代码行 风格=“x：y！重要；” 第二个是您可以覆盖已应用于该页面的任何 CSS。 即使那个值有 ！重要的， 也。 例如：
<style>
p {
color:#313373!important;
font-size:2rem;
}
</style>
<div class="special-paragraph" style="color:#blue!important;">
<p>This text will show up blue now, even though there's another !important tag
applied to the paragraph selector on this page!</p>
</div>
即使有嵌入的 HTML 样式使用 <样式> 使用 ！重要的 在同一个选择器上，针对特定段落的内联 CSS 将是呈现的。
谨防堆叠重要标签
让我们以最后几个例子为例，并发出警告。 这些类型的用途在小剂量下是可以的。 您可以一次性使用它们，而且可能没有人会遇到问题。 因为，作为一次性的，你已经专门使用了 ！重要的 为单个元素设置样式。 这是它的用途.
但是，如果您开始使用 ！重要的 作为拐杖，作为避免经常编辑样式表的一种方式，或者作为对同一站点上多个问题的快速修复，这是意大利面条代码的开始。 特别是对于不是你的未来开发者。 虽然您可能很难弄清楚 ！重要的s 渲染，未来的开发者可能会发现这是不可能的。
最终会发生的是，有这么多堆叠 ！重要的跨站点与多个样式表、页面和模块交互，而普通 CSS 很少呈现。 有时，甚至标记的东西 ！重要的 不渲染。 或者更糟的是，之后的每一个变化都必须被标记 ！重要的 只是为了让它出现，除非您想拆除网站的样式并重新构建它。
包起来
CSS important 确实是设计师工具包中最强大的工具之一。 您可以轻松调整站点上的任何元素，而不必担心影响任何下属或同行。 但是如果你过度使用它，效果可能会级联成页面和元素试图相互覆盖的噩梦，曾经重要的东西变成了默认值，但不能设置为默认值。 所以尝试使用 ！重要的 谨慎行事，这样当您确实需要一些东西来脱颖而出或面向未来时，您就以正确的方式去做。
你觉得在你的项目中使用 CSS !important 怎么样？
文章特色图片来自 wan wei / shutterstock.com
