前端深入之css篇|你真的了解“权重”吗?

原文:前端深入之css篇|你真的了解“权重”吗?

写在前面

权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了。但还有的时候,!important也并不能解决我们的问题,下面请跟随我来详细了解一下css的权重吧!

探索权重

指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性。

以上是摘自百度百科对“权重”的解释。css中权重就相当于不同选择器之间的排名,那么权重是怎样计算的呢?

  • 标签选择器 1
  • 类选择器 10
  • id选择器 100
  • 行内样式 1000
  • !important ∞(正无穷)

这也就是为什么我们更改样式不起作用的时候喜欢用!important的原因了,因为放上去就是无穷大,仿佛所有样式都可以正常使用了。但!important真的有这么神奇吗?不妨往下看。

简单练习

分析以下代码中文字的最终颜色。

<div class="myClass" id="myId" style="color:yellow; /* 权重1000 */">不是酸柠檬</div>
<style>
div{
    color: pink; /* 权重1 */
}
.myClass{
    color: red; /* 权重10 */
}
#myId{
    color: blue; /* 权重100 */
}
</style>

 

通过代码,可以很清楚的了解到权重最大的是1000,所以当前文字应该现在为yellow黄色。

接下来我们加大难度试试。

<div class="myClass" id="myId" style="color:yellow; /* 权重1000 */">不是酸柠檬</div>
<style>
div{
    color: pink; /* 权重1 */
}
.myClass{
    color: red !important; /* 权重 ? */
}
#myId{
    color: blue !important; /* 权重 ?*/
}
</style>

 

这里文字会显示会显示为blue蓝色,因为此时类选择器的权重是∞+10,id选择器的权重是∞+100所以显示为id选择器的颜色。

那如果我就想让他显示红色呢?我尝试以下代码

.myClass{
    color: red  !important !important; /* 权重 ? */
}
 

sorry,!important这样用会造成报错,!important的作用是给当前样式加权重,但不能多次叠加。

深入思考

<div class="myClass" id="myId" style="color:yellow;">不是酸柠檬</div>
<button onclick="document.querySelector(‘#myId‘).style.color=‘green‘">改变颜色</button>
<style>
div{
    color: pink;
}
.myClass{
    color: red !important;
}
#myId{
    color: blue !important;
}
</style>

 

如果不点击按钮,那么文字的颜色将会是id选择器的颜色蓝色,但是点击按钮后是要给元素添加颜色的,此时会显示什么颜色呢?

其实多思考以下就能想到,我们通过id找到了这个元素,然后修改他的颜色,所以本质上修改的是这个div的颜色,也就是行内元素,但是此时id选择器的权重最大,所以点击按钮之后是不会修改成我们想要的绿色的。

那么如果在js中修改时给绿色加权重呢,不妨试一下以下代码

<button onclick="document.querySelector(‘#myId‘).style.color=‘green !important‘">改变颜色</button>
 

sorry,!important也不能这样使用,这不符合js的语法规则,所以无论如何点击,颜色都不会改变的。

结论

通过以上实例,我们了解到了,简单好用的!important在一些场景里也是不好用的,尤其是当你随手拿来一个库使用的时候,你了解不到它内部的权重分布,所以样式操作起来也不能够得心应手。

当然你也不用纠结,一个优秀的库或者框架都是很少使用!important的,当你发现你的样式作用不上的时候,完全可以利用id选择器来增加权重,实现你想要的效果。

!important虽好,也不要乱用哦~

结语

以上就是本文章的全部内容了,如果有不正确的地方欢迎指正。

感谢您的阅读,如果感觉有用不妨点赞/转发。

前端深入系列是一个踩坑系列,是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结,在此记录分享出去,同时也是对自我技能的一个反思和追问。

前端路漫,踩坑不断。

前端深入系列持续更新中……

以上2019-9-27。

原文地址:https://www.cnblogs.com/lonelyxmas/p/11736134.html

时间: 2024-10-27 07:37:23

前端深入之css篇|你真的了解“权重”吗?的相关文章

前端深入之css篇丨2020年前,彻底掌握css动画【transition】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[transition] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 话不多说,马上

前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画

原文:前端深入之css篇丨初探[transform],手把手带你实现1024程序员节动画 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 值此10

前端深入之css篇丨2020年前,彻底掌握css动画【animation】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[animation] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已

前端面试集锦——CSS篇

三.CSS篇 3.1.谈谈你对CSS布局的理解 3.2.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div ></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasLayou

前端开发之css篇

一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.css的引入方式 (1)行内式引入: <div style="color:red;font-size: 16px">hello</div> 直接在html语句的属性中设置,这种方法的缺点是html代码和css代码混合在一起,耦合性太强,维护困难 (2)嵌入式引入: &

前端深入之css篇|link和@import到底有什么区别?

写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式.那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧! 区别 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet&

前端学习随笔 css篇

CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > 块 引入外部css文件 标签选择器 div{ background-color:

前端开发之CSS篇一

一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1??  CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.而此时CSS就出现了. CSS的出现解决了以下问题: 首

前端开发之CSS篇三

一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体属性 六.超链接美化 七.背景属性(颜色.图片.位置)   1??  CSS布局之浮动 float:即浮动,CSS布局用得最多的一个属性. 效果:元素并排,并且两个元素都能够设置宽度和高度. 要想学好必须要知道的四个特性: (1)浮动的元素脱标: (2)浮动的元素互相贴靠: (3)浮动的元素有“字围“效果: (4)紧凑的效果 1.元素脱标 脱离