CSS 选择器权重优先级计算规则

原文地址：http://www.jianghuihui.vip/a/jishuwenzhang/HTML_CSS/20180109/34.html

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.继承获取的样式权重永远最低