CSS ！重要：它是什么以及何时使用它

已发表: 2020-06-27

CSS 中最有用和最有争议的元素之一是!important属性。 每个设计师都会在某个时候遇到 CSS 代码中的标签。 发生这种情况时出现的真正问题和困境是“它是否正确使用？” 因为 CSS !important是一个如此强大的工具，开发人员和设计人员在使用它时需要了解最佳实践。 CSS !important 会导致各种意大利面条式代码，这对任何人都不利。

什么是 CSS 重要？

CSS 中的!important属性表明它所附加的任何规则优先于其他规则。 它是元素和与其一起使用的选择器的重中之重，因此让开发人员和设计人员可以对网站各个部分的样式进行特定控制。 在大多数情况下，这意味着覆盖style.css或custom.css 中包含的站点的默认样式。

!important 的每个实例仅适用于它出现的特定行。 因此，您可以在片段的某些部分（但不是全部）上使用该属性。 !important的 CSS 代码如下所示：

.example-class {
	color:#fff!important;
}

!important要记住的主要事情有两个：

  1. “重要”一词必须始终以感叹号(!)
  2. 分号必须始终位于行尾，在 !important 声明之后

!important甚至可以在逐页或逐模块的基础上使用（在像 Divi 这样的页面构建器的情况下），如果你愿意的话——尽管这就是你如何进入覆盖哪个元素的意大利面条式代码哪个页面，按什么顺序？

每个设计师在某个时候都会遇到 CSS 重要标签，并且必须做出决定。 这是否值得覆盖网站的默认样式？

有时，答案是肯定的。 其他时候，这是一个艰难而快速的不。 让我们看一下 CSS 的一些最佳实践，以了解它何时可能不会破坏任何东西，无论是现在还是将来。

何时使用 CSS 重要

!important的主要（也是最广泛接受的）用途是当您希望与主要选择器交互的类具有不同的样式时。 也许您希望博客上的标题和元信息的字体和颜色与网站的其余部分不同。 这些元素的默认样式继承自 CSS 文件中的h1和p选择器。 您在.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 important 属性会覆盖默认值，让您可以对其进行精细控制。

这种个性化定制是!important的主要用途。 但不是唯一的。

使用 CSS 重要来保护类、ID 和元素

您还可以使用!important来确保页面的各种元素面向未来，网站的进一步开发可能会以意想不到的方式进行调整。 例如，您可以为订阅框或电子邮件选择加入或 YouTube 嵌入开发特定样式。 其中每一个都可能从不同位置的样式表继承不同的样式。 使用!important标签可以使它需要一个刻意的手来改变你的表单或按钮的样式。

只需使用类或 ID 命名元素，然后将!important放在每一行上。

.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 经典编辑器的文本视图，您绝对可以将!important与内嵌 CSS 样式结合使用。

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

这很重要，原因有几个。 首先，您可以使用style="x:y!important;"专门控制页面中的任何代码行。 第二个是您可以覆盖任何已应用于该页面的 CSS。 即使该值也有!important 。 例如：

<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>

即使使用<style></style> 的嵌入式 HTML 样式在同一选择器上使用!important ，针对特定段落的内嵌 CSS 将是呈现的样式。

小心堆叠重要标签

让我们举最后几个例子，并发出警告。 这些类型的用途在小剂量下很好。 您可以一次性使用它们，而且可能没有人会遇到问题。 因为，作为一次性，您专门使用!important来设计单个元素的样式。 这就是它的用途。

但是，如果您开始使用!important作为拐杖，作为一种避免频繁编辑样式表的方法或作为同一站点上多个问题的快速修复，那就是意大利面条式代码的开始。 特别是对于不是你的未来开发者。 虽然您可能很难弄清楚!important的呈现顺序，但未来的开发人员可能会发现这是不可能的。

最终会发生的情况是，站点中有太多堆叠的!important与多个样式表、页面和模块交互，而普通 CSS 很少呈现。 有时，即使是标记为!important 的东西也不会呈现。 或者更糟的是，之后的每个更改都必须标记为!important才能显示出来，除非您想拆除站点的样式并重新构建它。

包起来

CSS important 老实说是设计师工具包中最强大的工具之一。 您可以轻松调整站点上的任何元素，而不必担心影响任何下属或同级。 但是如果你过度使用它，效果可能会级联成一个页面和元素试图相互覆盖的噩梦，曾经重要的东西已经成为默认值，但不能设置为默认值。 所以尽量少用!important ，这样当你确实需要一些东西来脱颖而出或面向未来时，你就以正确的方式去做。

你觉得在你的项目中使用 CSS !important 感觉如何？

文章精选图片由 wan wei/shutterstock.com 提供