前端刷题系列正在更新：02/100+
-
01：请解释事件委托 -
02：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的方式，去覆盖组件的样式了。
我的补充回答
CSS 选择器优先级决定了当多个规则应用于同一元素时，哪条规则的样式会被应用。优先级由选择器的特殊性 (specificity) 决定，特殊性越高，优先级越高。
特殊性计算方法
特殊性由四个部分组成，从左到右，重要性依次递减：
-
内联样式 (Inline styles): 元素的 style属性中定义的样式，特殊性值为1,0,0,0。例如：<div style="color: red;"></div>。 -
ID 选择器 (ID selectors): 使用 # 符号选择元素，特殊性值为 0,1,0,0。例如：#header。 -
类选择器、属性选择器和伪类 (Class selectors, attribute selectors, and pseudo-classes): 使用 .,[ ],:选择元素，特殊性值为0,0,1,0。例如：.button,[type="text"],:hover。 -
元素选择器和伪元素 (Type selectors and pseudo-elements): 使用元素名称或 ::选择元素，特殊性值为0,0,0,1。例如：div,::before。
计算规则:
-
将每个选择器的特殊性值相加，得到一个四位数。 -
比较四位数，从左到右，数值大的优先级更高。 -
如果四位数完全相同，则后定义的规则优先级更高。 -
!important规则具有最高的优先级，它会覆盖任何其他规则。
示例
/* 特殊性值: 0,1,0,0 */
#header {
color: red;
}
/* 特殊性值: 0,0,1,1 */
div.content p::first-line {
color: blue;
}
在上面的例子中，#header 的特殊性值更高，因此它的样式会被应用。
注意事项
-
通配符选择器 ( *) 和关系选择器 (例如+,~) 对特殊性没有贡献。 -
计算特殊性时，不要考虑继承的样式。
原创文章，作者：速盾高防cdn，如若转载，请注明出处：https://www.sudun.com/ask/49616.html
