ID选择器必须唯一，类选择器可复用；ID权重高但易引发JS/CSS问题，现代开发应禁用ID用于样式和常规JS操作，仅保留于锚点、ARIA及表单关联等不可替代场景。
类选择器能复用，ID选择器必须唯一
一个 class="btn" 可以用在 20 个按钮上，浏览器完全接受；但 id="submit-btn" 在整个页面里只能出现一次。重复 ID 不会报错，但后果很实在：document.getElementById('submit-btn') 永远只返回第一个匹配元素，后续 JS 逻辑可能直接中断；CSS 层叠时，重复 ID 的样式可能被忽略或只作用于首个元素。
常见错误现象：
- 写了
#nav li a却没生效——HTML 里其实是class="nav"，不是id="nav" - 多个弹窗都加了
id="modal"，结果只有第一个能关掉，其余 JS 事件全失效
ID选择器权重是100，类选择器是10，别靠它“赢”样式
权重不是性能指标，而是层叠规则里的计分卡。#header .nav-item 权重是 100+10=110，而 .header .nav-item 是 10+10=20。哪怕你写十个类，也压不过一个 ID ——这不是设计缺陷，是规范使然。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 为“确保按钮变蓝”，写了
#save-btn { color: blue; }，结果后期想加主题色时发现.theme-dark .btn根本覆盖不了它 - 调试时加
!important看效果，上线前忘了删，结果别人加个#form .btn就又得加更狠的!important，形成恶性循环 - 用
body #main .title这种“降权写法”试图平衡，反而让选择器更难读、更难维护
现代开发中，ID基本只留给锚点和ARIA关联
真正不可替代的 ID 场景就那么几个：label[for="email"] 必须对应 input#email，否则屏幕阅读器无法关联；aria-labelledby="tooltip-1" 依赖 ID 的唯一性；<a href="#section2"> 跳转也靠它。除此之外，CSS 和 JS 都该绕着 ID 走。
实操建议：
- CSS 中禁用 ID 选择器，改用语义化 class 组合，比如
.page-header .nav-list - JS 操作优先用
document.querySelector('.js-modal-toggle')，而不是document.getElementById('modal-toggle') - 测试专用可加
data-testid="save-button"，比硬塞 ID 更健壮
类名命名要描述行为或状态，别写视觉特征
class="red-text" 看似直观，但需求一变（比如改成深灰）、主题一换（暗色模式），就得全局搜替换；class="error-message" 或 class="is-disabled" 则明确表达了用途，样式改了也不影响 class 含义。
关键点：
- BEM 命名如
.card__title、.button--primary能天然避免权重爆炸，也方便模块化 - 服务端渲染（SSR）场景下，重复 ID 会导致 hydration 失败，React/Vue 都会警告甚至报错
- 浏览器对 class 名做了索引优化，
.btn查找几乎是 O(1)，性能不输 ID，但安全得多
data- 属性或语义化标签本身。 
