css选择器权重优先级排序
CSS有两大特性，继承性和层叠性
层叠性指的是：权重相同的情况下，后写的覆盖前面的样式。
由此可见，层叠性和选择器的权重有很大关系，今天就着重说一下选择器的权重
选择器有两大类：
基础选择器：id选择器，类选择器，标签选择器，通配符选择器；
复合选择器：后代选择器，并集选择器，指定标签（交集）选择器；
权重：
基础选择器权重：id选择器 > 类选择器> 标签选择器> 通配符选择器；
复合选择器权重就需要计算了，这里讲两种计算方法
一、加法运算
1.内联样式，如: style=””，权值为1000。
2.ID选择器，如：#content，权值为100。
3.类，伪类和属性选择器，如.content，权值为10。
4.标签选择器和伪元素选择器，如div p，权值为1。
复合选择器的权重计算：
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高
比如：
#box ul li a.cur {color:red;}
#box li .cur {color:green;}
#box ul li a.cur 权重是 100+1+1+1+10 = 113
#box li .cur 权重是 100+1+10 = 111
那么后面的样式就会被前面的样式层叠掉,那么最终a的颜色是red
这是第一种加法运算
二、4个0计算方式
（0,0,0,0）分别对应（行内式个数,id选择器个数,类选择器个数,标签选择器个数）
两个选择器通过对比4个数的大小，确定权重关系
怎么理解呢？
例如：#box ul li a.cur 有1个id，3个标签，1个类 那么 4个0 就是 (0,1,1,3)
例如：.nav ul .active .cur 有0个id，1个标签，3个类 那么 4个0 就是 (0,0,3,1)
怎么比较大小呢：
先比较第一个数，两个都是0，所以对比第二个数，因为第一个选择器第二个数是1，而后一个选择器权重是0所以前面的选择器权重大。
注意：
1.无论哪种计算方式，10个标签选择器权重等于1个类选择器，10个类选择器 权重等于1个id选择器这种想法都是不对的。听说255个可以，我没试过，有兴趣可以自己试试
2.！important 权重永远最高
3.继承获取的样式权重永远最低
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-10-07 10:32
- 阅读 ( 978 )
- 分类：WEB前端开发
