Css权重计算方式
权重计算公式
将选择器按：id选择器,类选择器,标签选择器进行个数统计，根据统计结果进行排序
</p>
<title></title>
<style type="text/css">
/* 1，0，1 */
#box1 p {
color: red;
}
/* 0，3，2 */
.div1 div.div2 .div3 p {
color: blue;
}
/* 1, 1, 2 */
div.div1 #box2 p {
color: green;
}
/* 0, 2, 1 */
.div1 .div2 p {
color: pink;
}
</style>
<div id="box1" class="div1">
<div id="box2" class="div2">
<div id="box3" class="div3">
<p>这么多css属性，我到底该听谁的？会是什么颜色呢？</p>
</div>
</div>
</div>由统计的结果可知，1,1,2的权重最大，因此p标签的颜色应为green
image
高维打低维
看过《三体》的同学都知道，高维空间对于低维空间可以随便打，在四维空间，可以轻易地摧毁在三维空间无坚不摧的水滴。类似的，在css中，再多的标签选择器，也敌不过一个类选择器
image
继承而来的权重为0
继承父辈的财产，如果不好好利用，而是坐吃山空，那远不如自力更生者。css继承的样式，权重是0。即：随便一个标签选择器就能覆盖继承的样式
image
权重相同怎么办
如果选择器的权重相同，以style中后出现的选择器为准
image
<title></title>
<style type="text/css">
/* 1,1,1 */
#box1 .div2 p{
color:red;
}
/* 1,1,1 */
.div1 #box3 p{
color:blue;
}
</style>
<div id="box1" class="div1">
<div id="box2" class="div2">
<div id="box3" class="div3">
<p>权重相同的情况下，以style中后出现的选择器为准</p>
</div>
</div>
</div>
image
超出五行外的!important
有时候，我们需要给某个css样式赋予特殊的权重，尤其是接手一个css写得乱七八糟的项目，又没充足的时间去梳理样式代码，此时就可以在分号前加上!important，此关键字将超越所有权重，但不能滥用。
注意事项：
!important不影响继承性，该是0还是0。一个标签是通过继承性影响的，权重是0，加上!important也是0，也不能与已经选中了的选择器抗衡!important不影响就近原则，远的那个，写上!important也没用，还是以近的那个为准
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.01.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录