今天小编跟大家讲解下有关css权重 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css权重 的相关资料，希望小伙伴们看了有所帮助。
权重这个概念，相信对许多进行过前端开发的小伙伴来说肯定并不陌生，有时候一个样式添加不上，我们就会一个!important怼上去，一切就好像迎刃而解了。但还有的时候，!important也并不能解决我们的问题，下面请跟随我来详细了解一下css的权重吧！
探索权重指某一因素或指标相对于某一事物的重要程度，其不同于一般的比重，体现的不仅仅是某一因素或指标所占的百分比，强调的是因素或指标的相对重要程度，倾向于贡献度或重要性。以上是摘自百度百科对“权重”的解释。css中权重就相当于不同选择器之间的排名，那么权重是怎样计算的呢？
标签选择器 1类选择器 10id选择器 100行内样式 1000!important ∞（正无穷）这也就是为什么我们更改样式不起作用的时候喜欢用!important的原因了，因为放上去就是无穷大，仿佛所有样式都可以正常使用了。但!important真的有这么神奇吗？不妨往下看。
简单练习分析以下代码中文字的最终颜色。
<div class="myClass"id="myId"style="color:yellow; ">不是酸柠檬</div><style>div{ color: pink; }.myClass{ color: red; }#myId{ color: blue; }</style>通过代码，可以很清楚的了解到权重最大的是1000，所以当前文字应该现在为yellow黄色。
接下来我们加大难度试试。
<div class="myClass"id="myId"style="color:yellow; ">不是酸柠檬</div><style>div{ color: pink; }.myClass{ color: red !important; }#myId{ color: blue !important; }</style>这里文字会显示会显示为blue蓝色，因为此时类选择器的权重是∞+10，id选择器的权重是∞+100所以显示为id选择器的颜色。 那如果我就想让他显示红色呢？我尝试以下代码.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虽好，也不要乱用哦~来源：爱蒂网
