[css] 请描述css的权重计算规则

[css] 请描述css的权重计算规则

权重值计算
选择器 案例 权重值
!important !important Infinity
内联样式 style="…" 1000
ID #id 100
class .class 10
属性 [type=‘text’] 10
伪类 :hover 10
标签 p 1
伪元素 ::first-line 1
相邻选择器、子代选择器、通配符 * > + 0
比较规则

1000>100。也就是说从左往右逐个等级比较，前一等级相等才往后比。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
继承属性没有权重值
通配符、子选择器、相邻选择器等的。虽然权值为0，但是也比继承的样式优先。
ie6以上才支持important，并且尽量少用它。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题