CSS 优先级是如何计算的？

2019-01-03

回答

浏览器通过优先级权重来判断 CSS 属性值与元素之间的关系：权重越高关系越密切，高权重的 CSS 属性值就会赋予到元素上。我们可以把 CSS 分为四类，每类的矩阵权重从高到底排列如下：

• 内联样式（如：style="font-weight:bold"）：[1, 0, 0, 0]
• ID 选择器（如：#comments）：[0, 1, 0, 0]
• 类选择器（如：.footer)，属性选择器（如：[src$=".pdf"]），伪类（如：:active）：[0, 0, 1, 0]
• 类型选择器（如：h1），伪元素（如：::before）：[0, 0, 0, 1]

示例：

// 高权重 [0, 1, 0, 0] 
#footer {...}
// 低权重 [0, 0, 2, 1] 
.footer.fn__flex::before {...}

加分回答

• CSS 优先级是基于每列进行比对的，例如 ID 选择器的优先级总是高于多个类选择器叠加后的优先级。
• 如果多个选择器组合的优先级相等时，则会选择文件中靠后的那一组选择器属性值对元素进行渲染。
• 通配选择器（*），关系选择器（+, >, ~, ），否定伪类（:not()）对优先级没有影响。但是，在 :not() 内部声明的选择器将会受到优先级影响。
• 在 CSS 属性值后添加 !important 会导致优先级无效，元素会优先使用该属性值。但如果两组选择器中的同一属性值都添加了 !important，则会使用优先级高的那一组选择器中的属性值。
• 我们应减少 !important 的使用，否则被破坏了的优先级将让 debug 非常困难。除此之外，覆盖 !important 属性值的代码也不太美观。

返回总目录

每天 30 秒