css 权重

标签：选择   浏览器   lin   css   red   开始   style   样式   通配符   

css权重由高到低分别是

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

计算

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。

例如：

*{}     ====》0
li{}     ====》1(一个元素)
li:first-line{}     ====》2(一个元素，一个伪元素)
ul li {}        ====》2（两个元素）
ul ol+li{}     ====》3（三个元素）
h1+ *[rel=up]{}     ====》11（一个属性选择器，一个元素）
ul ol li.red{}     ====》13（一个类，三个元素）
li.red.level{}     ====》21（两个类，一个元素）
style=""     ====》1000(一个行内样式)
p {}     ====》1（一个元素）
div p {}     ====》2（两个元素）
.sith {}     ====》10（一个类）
div p.sith{}     ====》12（一个类，两个元素）
#sith{}     ====》100（一个ID选择器）
body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，个类，两个元素)

css 权重

标签：选择   浏览器   lin   css   red   开始   style   样式   通配符   

原文地址：https://www.cnblogs.com/birdofparadise/p/9337430.html