css样式优先级
2019-10-07 本文已影响0人
Nice先生的狂想曲
前言
如果从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。
遵循以下优先级(参考MDN CSS优先级)
以下顺序按照优先级递减的规则排列
- ！important规定的规则(不建议使用，可能导致debug困难)
- 内联样式，总是会覆盖外部样式
- ID选择器中定义的样式(如#container)
- 类选择器(如.book)，属性选择器(input[type=text])和伪类(:hover,:focus,:active等)
- 类型选择器(如input)和伪元素(常见的::after和::before)
其中权重的比较
- important的权重为1,0,0,0
- ID的权重为0,1,0,0
- 类的权重为0,0,1,0
- 标签的权重为0,0,0,1
- 伪类的权重为0,0,1,0
- 属性的权重为0,0,1,0
- 伪对象的权重为0,0,0,1
- 通配符的权重为0,0,0,0
由权重可得: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
