权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了。但还有的时候,!important也并不能解决我们的问题,下面请跟随我来详细了解一下css的权重吧!
指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性。
以上是摘自百度百科对“权重”的解释。css中权重就相当于不同选择器之间的排名,那么权重是怎样计算的呢?
这也就是为什么我们更改样式不起作用的时候喜欢用!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>
.myClass{
color: red !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虽好,也不要乱用哦~
拥有一个高权重的网站,相信是各位站长一直以来的梦想。每天看着别人高权重、多流量的网站暗自羡慕,自己在想总有一天我也会做到一天10万IP,但想象归想象
StyleRuleBase类: 单个的样式规则(选择器+规则体);StyleSheetContents类: 样式规则集,其成员-m_childRules是一个StyleRuleBase实例的列表,是1:n的数量关系
本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法。奖项权重:[1, 5, 20, 74]。奖项权重主要用来表征各奖项的中奖几率,这里奖项权重数组的和值为100(=1+5+20+74),其中1表示一等奖的中奖概率为1%;
CSS权重是由四个数值决定,第一等:内联样式,如:,权值为1000.(该方法会造成css难以管理,所以不推荐使用)第二等:ID选择器,如:#header,权值为0100.第三等:类、伪类、属性选择器如:.bar, 权值为0010.
行内样式总会覆盖外部样式表的任何样式(除了!important),单独使用一个选择器的时候,不能跨等级使css规则生效,如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!