我
CSS 选择器的优先级是如何计算的?
难度:
浏览器通过优先级规则,判断元素展示哪些样式。优先级通过 4 个维度指标确定,我们假定以a、b、c、d
命名,分别代表以下含义:
a
表示是否使用内联样式(inline style)。如果使用,a
为 1,否则为 0。b
表示 ID 选择器的数量。c
表示类选择器、属性选择器和伪类选择器数量之和。d
表示标签(类型)选择器和伪元素选择器之和。
优先级的结果并非通过以上四个值生成一个得分,而是每个值分开比较。a、b、c、d
权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。所以,如果b
的值不同,那么c
和d
不管多大,都不会对结果产生影响。比如0,1,0,0
的优先级高于0,0,10,10
。
当出现优先级相等的情况时,最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则(无论是在该文件内部还是其它样式文件中),那么最后出现的(在文件底部的)样式优先级更高,因此会被采纳。
在写样式时,我会使用较低的优先级,这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要,这样使用者就不需要通过非常复杂的优先级规则或使用!important
的方式,去覆盖组件的样式了。