ID选择器优先级高于类选择器（100＞10），核心用途是唯一锚点定位而非样式；类选择器更利于复用、工程化与可访问性，现代开发应避免用ID写样式。
类选择器和 ID 选择器的优先级差异
ID 选择器的 CSS 优先级永远高于类选择器，哪怕你写十个 .btn.btn-primary.btn-lg，也压不过一个 #submit-btn。这是由 CSS 权重规则决定的：ID 选择器算作 100，而每个类选择器只算 10，所以 #header .nav li a（100+10+1+1）比 .header-nav .nav-item .nav-link（10+10+10）高得多。
常见误操作是试图用多个类覆盖 ID 的样式，结果改了半天没生效——这时候该检查是不是某处写了 id="xxx" 并被全局样式命中了。
- 优先级计算不看嵌套深度，只看选择器类型数量
-
!important能绕过权重，但会破坏可维护性，别为掩盖 ID 冲突滥用它 - 内联样式（
style="..."）权重为1000，比 ID 还高，但同样不推荐
什么时候必须用 ID 选择器
ID 选择器的核心价值不在样式，而在唯一锚点定位。比如 label[for="email"] 必须匹配 input#email，否则表单可访问性失效； 跳转也依赖 id="section2"。CSS 中用 ID 做样式，绝大多数情况属于误用。
现代前端框架（React/Vue）里，组件内 ID 很难保证全局唯一，document.getElementById 查找也容易因动态渲染失败。除非你在写纯静态页面或需要锚点/表单绑定，否则别为“看起来更具体”而用 ID 写样式。
立即学习“前端免费学习笔记（深入）”；
- JS 获取元素：优先用
document.querySelector('.modal')而非document.getElementById('modal')，避免 ID 冲突或重复 - 服务端渲染或 SSR 场景下，重复 ID 会导致 HTML 校验失败，浏览器可能静默忽略后续同名 ID
- CSS-in-JS 或 CSS Modules 默认不生成 ID，说明它已不是主流样式组织方式
类选择器在性能和复用上的实际表现
浏览器渲染引擎对类选择器做了大量优化。Chrome 的 Style Engine 在匹配时会建立类名索引表，查找 .card 几乎是 O(1)；而 ID 虽然也快，但一旦页面中出现多个相同 ID（即使不符合规范），匹配行为不可预测。
真正影响性能的是选择器复杂度，不是类或 ID 本身。比如 div ul li a span.highlight 比 .highlight 慢得多，无论后者是类还是 ID。
.button {
padding: 8px 16px;
}
.button--primary {
background: #007bff;
}
.button--disabled {
opacity: 0.5;
cursor: not-allowed;
}
上面这种 BEM 风格类名，支持组合、语义清晰、便于 JS 通过 element.classList.contains('button--disabled') 判断状态，而 ID 完全无法做到这点。
- 避免用 ID 做状态切换（如
#btn-loading），改用.btn.is-loading - 构建工具（如 PostCSS）能自动压缩类名，但对 ID 名无能为力——类更适合工程化
- 服务器端渲染时，类选择器更容易做 SSR 样式提取（如
critters工具只处理 class/id，但 class 更可控）
真实项目里 ID 和类混用的坑
最典型的问题是：HTML 里写了 id="header"，CSS 里又写了 #header { margin-top: 20px; }，后来需求改成双栏布局，需要两个 header，结果只能复制 ID 或删掉 ID 改用 class——但 CSS 里没同步改，样式就丢了。
另一个隐形问题是调试困难：devtools 里看到元素有 id="user-card"，你以为它是唯一入口，结果发现 JS 里用 querySelectorAll('[id^="user-card"]') 批量操作，其实早就不唯一了。
- 用 ESLint 插件
eslint-plugin-jsx-a11y检查label[for]和id是否配对 - 在 CI 流程中加入 HTML validator（如
html-validate），禁止重复 ID 报错 - 团队约定：所有 ID 只用于
aria-labelledby、for、href锚点三类场景，CSS 中禁止出现#xxx
ID 不是“更高级”的选择器，它只是个唯一标识符；类才是样式和行为的自然载体。把 ID 当成样式钩子，就像拿螺丝刀当锤子——能敲两下，但迟早崩刃。
