重要在CSS中是什么意思?

重要的力量改变了瀑布

学习如何编写网站代码的最好方法之一就是查看源代码其他的网站。这种做法是许多网络专业人士学习他们的技术,特别是在还没有这么多选择的日子网页设计课程、书籍和在线培训网站。

如果您尝试这种做法,并查看站点的级联样式表,您可能会在代码中看到一行代码,上面写着重要的!.这个术语改变了样式表内处理的优先级。

CSS编码
E+ / Getty Images

CSS的级联

层叠样式表确实如此级联,意思是它们按特定的顺序排列。一般来说,样式是按照浏览器读取它们的顺序应用的。首先应用第一种样式,然后应用第二种样式,依此类推。

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

例如,假设样式表中包含以下样式。段落文本将呈现为黑色,即使应用的第一个样式属性是红色。这是因为“black”值列在第二位。由于CSS是从上到下读取的,所以最终的样式是“黑色”,因此这种样式获胜。

P{颜色:红色;}
P{颜色:黑色;}

如何重要改变优先级

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

要使段落文本始终是红色的,根据前面的例子,更改样式如下:

P{颜色:红色!重要;}
P{颜色:黑色;}

现在所有的文本将以红色显示,即使“黑色”值列在第二。important指令覆盖了级联的常规规则,它给了那种风格非常高的特异性。

如果您确实需要将段落显示为红色,这种样式可以做到,但这并不意味着这是一个好的实践。

何时使用!很重要

当你在测试和调试一个网站时,!important指令是很有帮助的。如果你不确定为什么风格不被应用,认为这可能是一个特异性冲突,添加!重要声明你的风格是否修复它,如果是,改变选择器和移除的顺序!重要的指令从你的产品代码。

如果你过于依赖!important声明来实现你想要的样式,你最终会得到一个充斥着!important样式的样式表。您将从根本上改变页面的CSS处理方式。从长期管理的角度来看,这是一种懒惰的做法。

在测试时使用!important,或者在某些情况下,当您绝对必须覆盖作为主题或模板框架一部分的内联样式时。即使在这些情况下,也要谨慎使用这种方法,而不是编写干净的样式表,以尊重级联

用户样式表

这个指令也被用于帮助网页用户处理那些使页面难以使用或阅读的样式表。

有人定义了一个样式表要查看网页,该样式表被页面作者的样式表驳回。如果用户将一个样式标记为!重要,那么该样式将推翻网页作者的样式表,即使作者将一个规则标记为!重要。

这种层次结构对于需要以某种方式设置样式的用户很有帮助。例如,视力受损的读者可能需要在他们使用的所有网页上增加默认字体大小。通过在你创建的页面中少量使用!important指令,你可以满足读者的独特需求。

这个页面有用吗?