CSS中的！Important规则给了你覆盖样式的能力，但是对于一个单独的软件开发人员来说，这个权力是不是太大了？阅读这篇文章，找出它是什么，以及什么时候使用它是一个好主意！

！Important规则很特殊，因为它能够覆盖css样式的自然cascade。

请考虑下面的HTML/CSS代码...你认为文字会是什么颜色？

1<div>
2  <h1 id="title">Sir Chompsalot</h1>
3</div>

1div h1 {
2  color: blue !important;
3}
4
5div h1 {
6  color: green;
7}

通常，如果我们有两个具有相同专用性的CSS规则，则后一个规则将获胜。在本例中，前面的css规则击败了后面的任何规则，因为它有强大的！portant规则。

文字是蓝色的！

使用相同的HTML标记，如果我们通过针对body标记和h1# tile来获得更具体的内容，会怎么样？

1div h1 {
2  color: blue !important;
3}
4
5body div h1#title {
6  color: green;
7}

这是否有能力覆盖！重要性规则？

不要啊！哇，‘重要’规则太强大了，不利于自身的利益。

现在是什么时候？

由于！Important与css的预期行为相矛盾，一般建议避免使用。如果你太频繁地依赖！Important，它可能会导致许多意外的行为，新开发人员将很难调试他们的CSS。为什么这个文本没有改变颜色！😂

这是否意味着你永远不应该使用它？

使用场合！重要

自从！Important被引入css以来，随着时间的推移，人们似乎达成了一些共识，即它实际上只适用于一项单一的工作：处理外国css。

外来的css本质上是任何你没有直接能力改变或提高自己的css。外来CS的两个实际实例是：

• 脚本框架和外部库：适用于Bootstrap，或Normalize.)等流行的库因为你不能直接编辑他们的css样式，有时你唯一的选择就是用你自己的！portant规则覆盖他们的css。
• 用户风格：这在几年前非常流行。用户风格为您提供了一种创建自己的css的方式，以注入到其他人/公司的网站上。例如，instagram.com的这个黑暗主题

因为外来的css不能被你改变(除非你在Instagram找了一份工作来纠正他们严重缺乏黑暗模式的问题)，所以`！重要‘规则真的是你唯一的，也是最好的选择。

<$>[注]Mozilla Developer Network和[CSS-Tricks](https://css-tricks.com/when-using-important-is-the-right-choice/ article-header-id-1)的工作人员似乎一致认为，！Important实际上只适用于处理外来的css<$>

结论

如果你真的想使用`！重要的是，试着反思你可以做出的架构决策。不仅仅是你的CSS。这可能意味着添加新的HTML标签，或应用新的类/id。参与这种以架构为中心的实践会产生高质量的代码，这是一种维护的乐趣！🤓

<$>[注]您有没有找到！重要性的其他适当用法？在@alligatorio上发推文给我们，并与我们分享！<$>