css选择器权重

136 阅读1分钟

css选择器权重 1,!important Infinity(正无穷大) 2,行间样式 1000 3,id 100 4,class | 属性 | 伪类 10 5,标签选择器 伪元素 1 6,通配符 0

  • 权重计算: 通过选择器权重,计算出4位数,数值越大权重越高, 计算过程不是十进制,是256进制 千位:内联样式, 记1,否则记0 百位:选择器中所有id的数量,记1,否则记0 十位:class,属性,伪类, 记1,否则记0 各位:元素(标签),伪元素 , 记1,否则记0 例如 /0102/ #only div a{ color:red;} /0002/ div a{ color:green;} /0102/ #only a::after{ content: "*"; color:purple;} /0201/ #only #only2 a{ color: orange;} /0022/ .box div a:hover{ color:blue;} /0012/ .box div a{ color:#ccc;}