之前理解的css选择器优先级是这样的
!important >内联样式> id > class > 元素选择器 > 伪元素
看了一下w3c的文档规范,发现压根没有我想的这么简单
!important > 内联样式
没有变化
先说说有哪些选择器:
- 类型选择器(type selectors)(例如, h1)
- 伪元素(pseudo-elements)(例如, ::before)
- 类选择器(class selectors) (例如,.example)
- 属性选择器(attributes selectors)(例如, [type="radio"]),
- 伪类(pseudo-classes)(例如, :hover)
- ID选择器(例如, #example)
- 通用选择器(universal selector)(*)
- 组合子(combinators) (+, >, ~, ' ')
- 否定伪类(negation pseudo-class)(属于伪元素)(:not)
这些元素的特异性如下
- ID选择器的个数(=a)
- 类选择器、属性选择器、伪类的个数(=b)
- 类型选择器、属性选择器、伪元素的个数(=c)
连接abc为一个三位数,计算他们的优先级:
* /* a=0 b=0 c=0 -> 优先级 = 0 */
LI /* a=0 b=0 c=1 -> 优先级 = 1 */
UL LI /* a=0 b=0 c=2 -> 优先级 = 2 */
UL OL+LI /* a=0 b=0 c=3 -> 优先级 = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> 优先级 = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> 优先级 = 13 */
LI.red.level /* a=0 b=2 c=1 -> 优先级 = 21 */
#x34y /* a=1 b=0 c=0 -> 优先级 = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> 优先级 = 101 */
参考链接:
css3选择器w3c标准
css2选择器w3c标准
MDN