css样式优先级

前言

如果从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。

遵循以下优先级(参考MDN CSS优先级)

以下顺序按照优先级递减的规则排列

1. ！important规定的规则(不建议使用，可能导致debug困难)
2. 内联样式，总是会覆盖外部样式
3. ID选择器中定义的样式(如#container)
4. 类选择器(如.book)，属性选择器(input[type=text])和伪类(:hover,:focus,:active等)
5. 类型选择器(如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 > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符