优先级.md

css选择器优先级

按照优先级从大到小：

1. important
2. inline style 内联样式
3. #id 选择器
4. .class 选择器、[attr=val]属性选择器、伪类选择器(:first-child,:hover,:focus)
5. element元素(标签)选择器、::after,::before伪元素选择器

通配符*,关系选择器+,>,~对优先级没有影响，可以看作不存在

权重：

• important无穷大
• 内联样式 1000
• id选择器 100
• class、属性选择器、伪类选择器 10
• 标签选择器，伪元素 1

权重采用叠加求和，大者优先级高，255进制

比较规则

• 从左往右，权重依次降低，同位数字相同，比较下一位。
• 总权重相同，后面覆盖前面
• 总权重相同，距离目标近的生效

特殊样式

• 内联样式 1-X-Y-Z
• !important 1-W-X-Y-Z

当!important修饰复合属性如background时，所有的子属性都会加上!important，不建议使用

参考

Specifishity :: Specificity with Fish