什么!重要的意思是CSS?

!重要的力量在级联的变化

学习如何编码网站的最佳方法之一是查看其他网站的源代码。 这种做法是有多少网络专业人员学习他们的技巧,尤其是在网页设计课程书籍和在线培训网站有这么多选项的日子里。

如果您尝试这种做法并查看网站的级联样式表(CSS),那么您可能在该代码中看到的一行是:重要的一行。

这意味着什么,同样重要的是,如何在样式表中正确使用该声明?

CSS的级联

首先,了解级联样式表实际上是级联的 ,这意味着它们按照特定顺序放置是很重要的。 一般来说,这意味着样式按浏览器读取的顺序进行应用。 第一种风格是应用的,然后是第二种等等。

因此,如果某个样式出现在样式表的顶部,然后在文档中向下更改,则该样式的第二个实例是在后续实例中应用的样式,而不是第一个样式。 基本上,如果两种风格说相同的东西(这意味着他们具有相同的特异性水平),则将使用列出的最后一个。

例如,让我们想象一下样式表中包含以下样式。 即使应用的第一个样式属性为红色,段落文本也会呈现为黑色。

这是因为“黑色”值列在第二位。 由于CSS是从顶部到底部读取的,因此最终样式为“黑色”,因此该样式获胜。

p {color:red; }
p {color:black; }

如何!重要改变优先顺序

现在您已经理解了CSS如何处理这些几乎相同的规则,我们可以看看!important指令如何改变一些东西。

!重要的指令影响你的CSS级联的方式,同时遵循你认为最重要的规则并应该被应用。 无论规则出现在CSS文档中的哪个位置,始终应用具有!important指令的规则。

为了使段落文本始终为红色,从以上示例中,您将使用:

p {color:red!important; }
p {color:black; }

现在,即使“黑色”值列在第二位,所有文字也会显示为红色。 !重要的指令覆盖了级联的正常规则,并且它给出了非常高的特性。

如果你绝对需要这些段落显示为红色,这种风格会做到这一点,但这并不意味着这是一个好的做法。 接下来我们来看看什么时候你可能想要使用!重要的,什么时候不适合。

何时使用!重要

!重要指令在测试和调试网站时非常有用。 如果您不确定风格为什么没有被应用,并认为它可能是一个特殊问题,那么您可以将!important声明添加到您的样式中,以查看是否修复了它。

如果添加!重要确实可以解决样式问题,那么您已经确定它是一个特定问题。 然而,你不想离开这个重要的代码,它只是为了测试的目的而放在那里。

由于测试已完成,您现在应该删除该指令并调整选择器以实现您的样式工作所需的特异性。 !重要的不应该进入您的生产现场,部分原因是它如何改变正常的级联。

如果你严重依赖!重要声明来实现你想要的样式,你最终将会拥有一个散布着!重要样式的样式表。 你将从根本上改变页面的CSS处理方式。 从长远的管理角度来看,这是一种懒惰的做法。

使用!重要的是用于测试,或者在某些情况下,当您绝对必须重写作为主题或模板框架一部分的内联样式时。

即使在这些情况下,尽可能谨慎地使用这种方法,而是努力编写可以理解级联的干净样式表。

用户样式表

关于!重要指令的最后一个注释是必须理解的。 该指令也适用于帮助网页用户处理使页面难以使用或阅读的样式表。

通常,如果用户定义样式表以查看网页,则该样式表被网页作者的样式表取代 。 如果用户将样式标记为!important,那么即使作者将规则标记为!important,该样式也会覆盖网页作者的样式表。

这对需要以某种方式设置样式的用户很有帮助。 例如,某人可能需要增加他们使用的所有网页上的默认字体大小。 通过在您构建的页面中谨慎使用!important指令,您可以满足用户可能具有的任何特殊需求。

由Jeremy Girard编辑