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

柔光的暖阳◎ 2023-01-01 13:55 109阅读 0赞

# 当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选择器
 *  类选择器=\* 伪类选择器=\* 属性选择器
 *  标签选择器=\*为元素选择器
 *  通配符选择器
 *  浏览器自定义  
    //直观理解这个顺序，也可以猜出来优先级了