权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的
权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1
类型 | 权重 |
---|---|
! important | 无穷 |
行间样式 | 1000 |
id | 100 |
class/属性选择器/伪类:hover | 10 |
标签选择器/伪元素:after | 1 |
通配符 | 0 |
01. *{} ====》0 02. li{} ====》1(一个元素) 03. li:first-line{} ====》2(一个元素,一个伪元素) 04. ul li {} ====》2(两个元素) 05. ul ol+li{} ====》3(三个元素) 06. h1+ *[rel=up] {} ====》11(一个属性选择器,一个元素) 07. ul ol li.red{} ====》13(一个类,三个元素) 08. li.red.level{} ====》21(两个类,一个元素) 09. style="" ====》1000(一个行内样式) 10. p {} ====》1(一个元素) 11. div p {} ====》2(两个元素) 12. .sith {} ====》10(一个类) 13. div p.sith{} ====》12(一个类,两个元素) 14. #sith{} ====》100(一个ID选择器) 15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)</pre>
原作者:
作者:Cherry丶小丸子
链接:https://www.jianshu.com/p/983ff63adaa6