学习如何编码网站的最佳方法之一是查看其他网站的源代码。这种做法是有多少网络专业人员学习他们的技巧,特别是在网页设计课程,书籍和在线培训网站有这么多选择的前几天。
如果您尝试这种做法并查看网站的级联样式表(CSS),那么您可能会在该代码中看到的一条内容是!important。这意味着什么,同样重要的是,您如何在样式表中正确使用该声明?
CSS级联
首先,了解级联样式表确实很重要 级联 ,意味着它们按特定顺序排列。通常,这意味着样式按浏览器读取的顺序应用。应用第一种样式,然后应用第二种样式,依此类推。
因此,如果样式显示在样式表的顶部,然后在文档中向下更改,则该样式的第二个实例是在后续实例中应用的实例,而不是第一个实例。基本上,如果两个样式说同一个东西(这意味着它们具有相同的特异性水平),将使用列出的最后一个样式。
例如,让我们假设样式表中包含以下样式。段落文本将以黑色呈现,即使应用的第一个样式属性为红色。这是因为“黑色”值列在第二位。由于CSS是从上到下读取的,因此最终的样式是“黑色”,因此获胜。
如何!重要更改优先级
现在您已经了解了CSS如何处理这些几乎相同的规则,我们可以看看!important指令如何改变一些事情。
!important指令会影响CSS级联的方式,同时遵循您认为最重要且应该应用的规则。无论CSS规则中出现该规则,始终都会应用具有!important指令的规则。
要使段落文本始终为红色,请从上面的示例中使用:
p {颜色:红色!重要; }p {颜色:黑色; }
现在所有文本都将显示为红色,即使“黑色”值列在第二位。 !important指令会覆盖级联的常规规则,并且它赋予该样式非常高的特异性。
如果你绝对需要段落显示为红色,这种风格会做到这一点,但这并不意味着这是一个很好的做法。让我们接下来看看你何时想要使用!important和什么时候不合适。
何时使用!重要
在测试和调试网站时,!important指令非常有用。如果您不确定为什么没有应用样式并认为它可能是一个特殊问题,您可以将!important声明添加到您的样式中以查看是否修复了它。
如果添加!important确实可以解决样式问题,那么您刚刚确定它是一个特殊性问题。但是,您不希望保留那些重要的代码,它只是用于测试目的。
测试完成后,您现在应该删除该指令并调整选择器以获得使样式工作所需的特异性。 !重要的是不应该进入你的生产网站,部分原因是它如何改变正常的级联。
如果你过分依赖于!important声明来实现你想要的风格,你最终会得到一个充满了!重要风格的样式表。您将从根本上改变页面的CSS处理方式。从长期管理的角度来看,这是一种懒惰的做法。
使用!important进行测试,或者在某些情况下,绝对必须覆盖作为主题或模板框架一部分的内联样式。即使在这些情况下,尽可能少地使用这种方法,而是努力编写理解级联的干净样式表。
用户样式表
关于!important指令的最后一个注释是必不可少的。该指令还用于帮助网页用户处理使页面难以使用或阅读的样式表。
通常,如果用户定义样式表以查看网页,则该样式表将被网页作者的样式表推翻。如果用户将样式标记为!important,则该样式将取代网页作者的样式表,即使作者将规则标记为!important。
这对于需要以某种方式设置样式的用户很有帮助。例如,某人可能需要在他们使用的所有网页上增加默认字体大小。通过在您构建的页面中谨慎使用!important指令,您可以满足用户可能具有的任何特殊需求。