栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在CSS中使用“!important”有什么含义?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在CSS中使用“!important”有什么含义?

是的,我想说您的使用示例

!important
是不好的做法,很可能会进一步导致不良后果。但这并不意味着永远都不能使用。

有什么问题
!important

当浏览器决定CSS如何影响页面时,特异性是起作用的主要力量之一。选择器越具体,对其添加的重要性就越高。这通常与所选元素出现的频率一致。例如:

button {     color: black; }button.highlight {     color: blue;     font-size: 1.5em;}button#buyNow {     color: green;     font-size: 2em;}

在此页面上,所有按钮均为黑色。除了“highlight”类的按钮是蓝色的。除了ID为“buyNow”的唯一按钮(绿色)之外。整个规则的重要性(在这种情况下为颜色和字体大小)由选择器的特殊性来管理。

!important
但是,是在属性级别而非选择器级别添加的。例如,如果我们使用以下规则:

button.highlight {    color: blue !important;    font-size: 1.5em;}

那么color属性的重要性就比font-size更高。实际上,颜色比

button#buyNow
选择器中的颜色更重要,而不是字体大小(字体大小仍由常规ID与类的特定性决定)。

元素

<button  id="buyNow">
的字体大小为
2em
,但颜色为color
blue

这意味着两件事:

  1. 选择器无法准确传达其中所有规则的重要性
  2. 覆盖蓝色的 唯一 方法是使用 另一个
    !important
    声明,例如在
    button#buyNow
    选择器中。

这不仅使样式表难以维护和调试,而且还产生滚雪球效应。一个

!important
导致另一个覆盖它,另一个导致另一个覆盖等等。它几乎永远不会只停留一个。即使
!important
是一个有用的短期解决方案,但从长远来看,它会再次吸引您。

什么时候可以使用:

  • 用户样式表中的替代样式。

这就是

!important
最初发明的目的:为用户提供一种替代网站样式的方法。辅助功能工具(例如屏幕阅读器,广告拦截器等)已广泛使用它。

  • 覆盖第三方代码和内联样式。

通常,我会说这是一种代码异味的情况,但是有时您别无选择。作为开发人员,您应该致力于对代码进行尽可能多的控制,但是在某些情况下,您的双手被束缚住了,您只需要使用现有的东西即可。使用

!important
谨慎。

  • 实用程序类

许多图书馆和框架配备了实用工具类喜欢

.hidden
.error
.clearfix
。它们仅用于一个目的,并且通常仅应用很少但非常重要的规则。(例如,
display:none
对于一个
.hidden
班级)。这些应该覆盖元素上当前使用的所有其他样式,
!important
如果您问我,肯定可以保证。

结论

使用

!important
声明通常被认为是不好的做法,因为它的副作用会干扰CSS的核心机制之一:特异性。在许多情况下,使用它可能表示CSS体系结构不佳。

在某些情况下,它是可以忍受的,甚至是首选的,但是在使用它之前,请确保您仔细检查其中一种情况是否确实适用于您的情况。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/368315.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号