CSS 选择器权重优先级计算规则 ———————————————— 原文地址：http://www.jianghuihui.vip/a/jishuwenzhang/HTML_CSS/20180109/34.html ———————————————— CSS有两大特性，继承性和层叠性 层叠性指的是：权重相同的情况下，后写的覆盖前面的样式。 由此可见，层叠性和选择器的权重有很大关系，今天就着重说一下选择器的权重 选择器有两大类： 基础选择器：id选择器，类选择器，标签选择器，通配符选择器； 复合选择器：后代选择器，并集选择器，指定标签（交集）选择器； 权重： 基础选择器权重：id选择器 > 类选择器> 标签选择器> 通配符选择器； 复合选择器权重就需要计算了，这里讲两种计算方法 一、加法运算 如图所示： 1.内联样式，如: 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.继承获取的样式权重永远最低 ————————————————