三句话就搞懂！CSS选择器的优先级计算方法

当CSS属性的效果互相抵触时，就需要计算CSS选择器的优先级。

首先，我们给选CSS择器分类：

• 行内样式 <div style="xxx"></div> ==> 标记a类
• ID 选择器 ==> 标记b类
• 类，属性选择器和伪类选择器 ==> 标记c类
• 标签选择器、伪元素 ==> 标记d类

**计数方法：**a/b/c/d类中，出现一类，就给a/b/c/d计一个 次数。a-d从高级到低级，a类的次数高的，其样式权重高，其余bcd类无需再比较；若a类的次数相同，则比较b类，b类的次数高的，其样式高权重高，其余cd类无需再比较。以此类推到d类。（此段一共3个句号，没骗你吧）

abcd类样式 的计数，举例如下:
{}为style的括号，*星号选择器 表示所有标签

*{}    //a=0 b=0 c=0 d=0 最弱权重
a:hover{}    //a=0 b=0 c=1 d=1 
ul ol{}    //a=0 b=0 c=0 d= 2
ul ol+li{}    //a=0 b=0 c=0 d=3 
h1+input[type=hidden]{}    //a=0 b=0 c=1 d=3  [type=hiden]属性选择器
ul ol li.acticce{}    //a=0 b=0 c=1 d=3 
#ct .box p    //a=0 b=1 c=1 d=1 
div#header :after{}    //a=0 b=1 c=0 d=2  :after伪元素
style=""    //a=1 b=0 c=0 d=0

另外：
1 还有 样式覆盖。
如果上述中有 权重计数相同的样式 相互抵触，谁写在下面（谁最后被写下），谁管用，之前先写的样式都被覆盖 不管用了。

2 上述分类是依据CSS选择器本身的优先级，大体上，从高到低 如下。其中 !important 会无视一切，包括上面的计算方法。

• 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}
• 作为style属性写在元素标签上的内联样式
• id选择器
• 类选择器=* 伪类选择器=* 属性选择器
• 标签选择器=*为元素选择器
• 通配符选择器
• 浏览器自定义
  //直观理解这个顺序，也可以猜出来优先级了