选择器权重是CSS特异性规则，以三元组(a,b,c)表示：a为内联样式数、b为ID数、c为类/属性/伪类数；权重高者生效，而非后写覆盖。

HTML 样式代码本身不直接生效，真正起作用的是 CSS 选择器及其权重规则；没搞懂权重，改样式就像在猜谜——明明写了 color: red，页面却还是黑色。

什么是选择器权重？为什么它比“谁写在后面”更关键

浏览器渲染时，并非简单按 CSS 文件顺序或声明顺序决定样式，而是先计算每个选择器的“特异性（specificity）”，再比大小。权重高者胜出，哪怕它写在前面。

权重不是相加数字，而是一组优先级三元组：(a, b, c)，对应：

• a：内联样式个数（如 style="color:red" → a=1）
• b：ID 选择器个数（如 #header → b=1）
• c：类、属性、伪类选择器个数（如 .btn、[type="submit"]、:hover → 各计 1）
• 标签名、伪元素（如 div、::before）不计入权重，只影响匹配范围

!important 真的能绕过权重吗？

能，但代价是破坏可维护性。它不是“提高权重”，而是把该声明提升到最高优先级层级，凌驾于所有普通规则之上（包括内联样式），但无法覆盖 JS 设置的 style 属性值。

立即学习“前端免费学习笔记（深入）”；

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

常见误用场景：

• 为解决一个冲突临时加 !important，结果后续多人维护时层层叠加，最终满屏 !important
• 在 CSS-in-JS 或框架组件中滥用，导致主题切换、暗色模式失效
• 以为 !important 可以穿透 Shadow DOM —— 实际上不能，需用 ::part() 或 ::theme()（若支持）

怎么快速判断两个选择器谁赢？

别心算三元组，用工具思维：打开 Chrome DevTools → 选中元素 → 看 Styles 面板里被划掉的样式，鼠标悬停就能看到具体权重值（如 0,1,1,1 表示 1 个 ID + 1 个类 + 1 个标签）。

几个典型对比：

• div#nav .link:hover vs .menu-item.active → 前者 (0,1,2,1)，后者 (0,0,2,0)，前者胜
• section article p（三个标签）vs .content p → 后者有类，权重更高（0,0,1,1 > 0,0,0,3）
• input[type="text"] 和 .form-control 权重相同（都是 0,0,1,0），此时才看源码顺序

权重规则本身不难，难的是在嵌套组件、CSS 模块化、第三方库样式共存时保持判断直觉。最常被忽略的其实是“伪类和伪元素的区分”：:nth-child(2) 算 1 个伪类（计入 c），::first-line 是伪元素（不计权），但很多人把双冒号写成单冒号还浑然不觉。