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

fny5jt9

当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选取器类选取器=* 伪类选取器=* 属性选取器标签选取器=*为元素选取器通配符选取器浏览器自定义

//直观理解这个次序，亦能够猜出来优先级了

7wu1wm0

期待与你深入交流，共探知识的无穷魅力。