ME!
链滴
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属性值的代码也不太美观。