当前位置: 首页 > Web前端 > CSS

前端深入css篇-你真的了解“重量”吗?

时间:2023-03-30 17:43:21 CSS

在前面写了重量的概念。相信很多做过前端开发的小伙伴都不陌生。有时候一个样式加不上去,我们再加上!important,一切似乎就迎刃而解了。但是有的时候,!important并不能解决我们的问题,请跟随我一起了解更多关于css权重的知识吧!探索权重是指某一因素或指标相对于某一事物的重要性。它不同于一般的比例。它不仅反映某一因素或指标的百分比,而且强调该因素或指标的相对重要性。倾向于贡献或重要性。以上摘自百度百科对“权重”的解释。css中的权重相当于不同选择器之间的排名,那么权重是怎么计算的呢?labelselector1classselector10idselector100inlinestyle1000!important∞(positiveinfinity)这就是为什么我们喜欢用!important的时候改变样式不起作用,因为放了就是无限的,好像所有的样式都可以正常使用。但是!important真的有那么神奇吗?不妨往下看。分析以下代码中文本最终颜色的简单练习。不酸柠檬

通过代码可以清楚的了解到最大权重是1000,所以当前的文字现在应该是黄色的。接下来我们尝试增加难度。不酸柠檬
这里的文字会显示为蓝色,因为类选择器的权重为∞+10,id选择器的权重为∞+100,所以显示为id的颜色选择器。那如果我只是想让他显示红色呢?我尝试以下代码.myClass{color:red!important!important;/*重量?*/}抱歉,以这种方式使用!important会导致错误。!important的作用是为当前样式增加权重,但不能叠加多次。深思不酸柠檬
改变颜色如果不点击按钮,那么文字的颜色会是id选择器的蓝色,但是点击按钮后,需要为元素添加颜色。这个时候会显示什么颜色?其实下面的你多想想就可以想到了。我们通过id找到了这个元素,然后修改了它的颜色,所以本质上修改了div的颜色,也就是内联元素,但是此时id选择器的权重最大,所以点击按钮就会以后不要修改成我们想要的绿色。所以如果在js中修改的时候给绿色加了权重,试试下面的代码改变颜色抱歉,!important不能这样使用,不符合js的语法规则,所以无论怎么点击,颜色都不会改变。结语通过上面的例子,我们了解到它简单易用!important在某些场景下并不好用,尤其是当你随意使用一个库时,你无法了解它内部的权重分布,因此style无法得心应手地操作。当然,您不必担心。一个优秀的库或框架很少被使用!重要的是,当你发现你的样式不起作用时,你可以使用id选择器来增加权重,达到你想要的效果。!important虽然好,但不要乱用~结语以上就是本文的全部内容。如有不妥之处,敬请指正。感谢阅读,觉得有用请点赞/转发。前端深入系列是一个踩坑系列。是对自己在工作学习中遇到的问题和踩过的坑的探索和总结。在此记录和分享,也是对自己技术的反思和质疑。.前路漫漫,陷阱不断。前端深入系列持续更新中……以上2019-9-27。