css样式important规则的正确使用方式


Posted in HTML / CSS onJune 10, 2022

一、理解 !important 与优先级无关

有的同学称 css 的样式优先级计算的例外规则-!important规则,为 css 样式优先级“最高级”,这其实有点道理,因为从作用结果上看,这似乎符合事实的。不管内联样式,还是百八十嵌套层的样式选择器组合,都可以被 !important 覆盖。

例如:下面这个优先级权重其实已经很高的样式,会轻易被 !important 作用的样式覆盖。

.text {
    color: green !important;

}
body #main .box p span {

    color: red;

}

按照下面的这份样式优先级权重规则来看,“body #main .box p span{}” 的优先级权重大约是 0113,而 ".text{}" 的优先级权重大约是 0010。

css样式important规则的正确使用方式

css 延时优先级权重规则说明:

一个选择器的优先级可以说是由四个部分相加 (分量),可以认为是个十百千 — 四位数的四个位数:

  • 千位: 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是1000。
  • 百位: 选择器中包含ID选择器则该位得一分。
  • 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  • 个位:选择器中包含元素、伪元素选择器则该位得一分。

css样式important规则的正确使用方式

css样式important规则的正确使用方式

正如上图所示,结果很显然,应用了 ".text{}" 的样式,文本颜色为 green。我们要注意,“body #main .box p span{}” 的优先级权重大约是 0113,而 ".text{}" 的优先级权重大约是 0010,前者的优先级更高,却应用了后者的样式,这是因为 !important 这个例外规则。注意,从技术上讲,!important 与优先级无关,所以你要算 !important 的优先级权重是多算?一万?八千?这没法算,它是例外规则,与最终的结果直接相关,但是与优先级无关。

当然,你如果从样式作用结果的角度理解,认为 !important 具有一个很高的样式优先级权重,尽管这个权重值不存在,但这样理解问题也不大。但说它是样式优先级的例外规则更合适,因为它就是如此设计的。关于例外规则,这在不合适量化,在某一套计算规则难以算清(难以解释)的场景下,使用例外规则很有好处。

二、什么时候可以使用 !important 规则

tips:css 中使用 !important 的合理场景,是去覆盖糟糕的难以更改的样式。注意是覆盖,而不是一开始写样式就使用 !important。覆盖+难以更改就是我认为的 !important 的合理适用场景。

例如下面的场景:

1.覆盖内联样式

内联样式的优先级权重很高,如果不便于改动源码中的样式,那么选用 !important 去覆盖掉原来的内联样式是合适的。因为此时,除了改动源码,还有什么合适的办法可以改动内联样式?似乎没有了吧。然后就是关于“不便改动源码”的理解,例如第三方插件的内联样式,这确实不便于改动。如果是自己开发中的项目,那么改动源码可能比起用 !important 去覆盖更合适。对于一些老旧项目里面的内联样式,这种源码是可以动的,但如果你认为“改动源码”非常费劲,你也有一点理由去使用 !important,但不太建议。

2.覆盖优先级很高的选择器

除了内联样式,还有一种需要使用 !important 的场景,那就是样式优先级很高,权重很大的样式。优先级很高,权重很大,是啥概念呢?就是除了改源码(代码),几乎没有办法能改动了。

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css-important Demo</title>
    <style>
        #main {

            color: red;

        }
        body #main {

            color: #002afd;

        }
        html #main {

            color: #5dfd00;

        }
        /* 假设这份样式在第三方插件中,除了改动源码,

        还有什么办法可以覆盖 html body #main{} 的样式,样式穿透已经改不动了吧 */
        html body #main {
            color: #2c3e50;
        }
    </style>
</head>
<body>
<div id="main">

    这一段普通的文字

</div>
</body>
</html>

例如上面的例子,html body #main{} 的优先级很高,如果的代码是在第三方插件中,我们不便于改动源码,也就是也无法使用内联样式这个秘密武器,而样式穿透的优先级又不够,没啥好办法了,此时就是 !important 的适用场景了。

还是这个样式 html body #main{} ,如果它在自己的项目中,但是不便于改动 html body #main{} 本身,因为那可能带来一些副作用,写内联样式又不好,那么也可以考虑 !important。请特别注意,使用 !important,是因为

html body #main{} 实在太高了,高到别的级联样式规则没办法覆盖,才使用 !important。如果是 html #main{} 或 body #main,这样优先级还不是很高的样式,那么不应该使用 !important 规则,因为我们还有合适的选择,例如 html body #main{} 的优先级就比它们都高。

还有一种情况,就是旧的样式已经使用了 !important 规则,而我们不便于改动源码(代码),那么只能使用 !important 去覆盖 !important 的样式。

例如下面这样:

div p { height: 30px !important; }
#my-container div p { height: 50px !important; }

有时可能还要结合样式穿透符,例如下面这样:

::v-deep #my-container div p { height: 50px !important; }

三、禁用 !important 的经验法则

为啥要特别强调谨慎使用 !important,因为正如前文说到的 !important 是例外规则,没法算清优先级权重,就是说使用 !important 会破坏固有的级联规则,让调试找bug,以及覆盖样式都变得更加困难。所以,才要特别强调谨慎使用 !important。

所以:

  • ①样式级联规则还管用,就别用 !important。
  • ②还有办法覆盖样式就别用 !important。

下面是来自 Mozilla 的经验法则提示:

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

到此这篇关于css样式important规则的正确使用方式的文章就介绍到这了,更多相关css important规则内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
分享几个实用的CSS代码块
Jun 10 #HTML / CSS
html中两种获取标签内的值的方法
Jun 10 #HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 #HTML / CSS
基于CSS制作创意端午节专属加载特效
聊聊CSS粘性定位sticky案例解析
Jun 01 #HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
You might like
DISCUZ 分页代码
2007/01/02 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
layui表格实现代码
2017/05/20 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
Python help()函数用法详解
2014/03/11 Python
Python中的is和id用法分析
2015/01/26 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
windows下python安装pip方法详解
2020/02/10 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
详解Anaconda 的安装教程
2020/09/23 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
入党思想汇报怎么写
2014/04/03 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书