css选择器的优先级

以前写过一篇如何个元素应用规则, 现在看来写的好烂, 所以再写一篇当作补充吧.

四个等级

css选择器的优先级规定了文档采用哪一种样式.
选择器的等级主要有以下四个等级(依次递减)

1. 行内样式(style声明)
2. id选择器
3. 类, 伪类, 属性选择器
4. 元素选择器, 伪元素选择器

当同一个元素有多个css规则时, 对照着上面的四个等级, 对每一个规则确定每个等级有几个选择器, 记下个数. 然后做下列运算.
行内样式的选择器个数乘以1000
id选择器的个数乘以100
第三等级的个数乘以10
第四等级的个数乘以1
然后将上述算出来的数想加, 数值最高的规则才会应用到元素.

important

importtant不算优先级, 但是它比上面四种都有影响力. 当某一个声明或者规则应用important元素时, 这个声明或者规则就会称为元素的应用样式, 其他则会被覆盖.
如:

p { height: 50px !important; } /*有效*/
p { height: 200px} /*无效*/

由于important的特性, 所以在css文件中应该少用important.

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity