前端深刻之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。