- 正确答案：CSS选择器优先级（Specificity）是浏览器用于决定当多个规则作用于同一元素时，哪个规则最终生效的计算机制。其计算采用四元组形式（a, b, c, d），按权重从高到低依次为： a — 内联样式（style属性）的数量（1个 = 1000） b — ID选择器的数量（1个 = 100） c — 类选择器（.class）、属性选择器（[type="text"]）、伪类（:hover、:nth-child等）的数量（1个 = 10） d — 元素选择器（div、p）、伪元素（::before、::after）的数量（1个 = 1）注意：通配符（*）、关系符（>、+、~、空格）、否定伪类 :not() 的括号内部参与计算，但 :not() 本身不贡献权重；!important 不属于优先级计算范畴，而是独立的强制覆盖机制（优先级高于所有常规规则，但仅作用于单个声明，且不可继承）。 - 解答思路： 1. 首先识别规则中各类选择器成分，逐类计数（a/b/c/d）； 2. 按四元组从左到右比较：高位相等才比下一位，一旦某位数值更大则胜出（如 (0,1,0,0) > (0,0,99,99)）； 3. 若四元组完全相同，则后声明的规则胜出（源码顺序，即层叠中的“later wins”原则）； 4. 最后考虑 !important — 它使该声明脱离常规优先级比较，单独在!important层叠上下文中按同样规则比优先级，且!important规则 > 普通规则；多个!important时仍按specificity + 顺序判断； 5. 注意继承（inherited）值永远低于任何直接指定（specified）值，即使其specificity为0。 - 深度知识讲解：优先级本质是CSS层叠（Cascading）机制的核心组成部分，而层叠共包含7个决策层级（按优先顺序）： 1. 是否重要（!important声明） 2. 来源（user agent < user < author） 3. 优先级（specificity） 4. 顺序（source order，即CSS文件中或style标签内的书写先后） 5. 继承性（inheritance，仅对可继承属性有效） 6. 默认值（initial value） 7. 强制重置（revert / revert-layer）底层实现上，现代浏览器（如Blink/WebKit）在样式计算阶段会为每个CSS规则生成一个Specificity值（uint32或结构体），通常编码为： specificity = (a << 24) | (b << 16) | (c << 8) | d 这样可直接用整数比较完成四元组大小判定（因a最大为1，b最大约255，c/d更小，24位足够隔离）。关键易错点深度解析： • :not() 伪类本身不增加权重，但其参数选择器计入c或d。例如： div:not(.foo) → c=1（.foo）, d=1（div）→ (0,0,1,1) #nav li:not([href]) → b=1（#nav）, c=1（[href]）, d=1（li）→ (0,1,1,1) • 属性选择器 [type="submit"]、类 .btn、伪类 :disabled 均属c级（权重10），地位完全等同； • 伪元素 ::before 和 ::after 属于d级（权重1），而 :before/:after（旧写法）是伪类，属c级（已废弃但仍被支持）； • 标签内联样式 style="color:red" 对应a=1（即1000），因此几乎总能覆盖外部ID规则（b=1=100），除非后者也带!important； • CSS Custom Properties（变量）无优先级，其计算发生在级联之后、布局之前，变量引用本身的权重由宿主选择器决定。 - 代码示例（用于验证和教学）：假设有如下HTML与CSS：

Click

对元素： - 第一条不匹配（hover未触发，且选择器含div，非a）； - 第二条不匹配（a不在.sidebar ul li路径下）； - 第三条匹配：*[role="button"] → (0,0,1,0)； - 第四条匹配：#nav a.active → 但#nav不存在，故不匹配；实际生效的是第三条（green）。若添加 #main a.active，则其 specificity = b=1（#main）+ c=1（.active）+ d=1（a）= (0,1,1,1)，高于 (0,0,1,0)，故变为purple。工具辅助：可通过Chrome DevTools → Elements → Styles面板，悬停每条规则右侧的“↑”图标查看具体specificity数值（如 0,1,1,1），并高亮显示获胜规则。

制造业中厂前端实习面经

全站热榜

创作者周榜