ID选择器只能匹配第一个同名元素，其余被静默忽略；CSS和getElementById均只作用于首个匹配项，重复ID会导致样式失效、JS不可达及SSR报错等问题。
ID 选择器只能匹配一个元素，但浏览器不会阻止你写多个相同 ID
HTML 规范要求 id 属性值在页面中必须唯一，可现实中很多人写 <div id="header"> 写了三遍，CSS 依然生效——这不是“可以这么做”，而是浏览器在容错：它只取第一个匹配的元素应用样式，其余被静默忽略。<ul>
<li>JavaScript 的 <code>document.getElementById() 永远只返回第一个匹配项，后续同 ID 元素彻底不可达
querySelectorAll("[id=header]") 能拿到全部，但这已脱离 ID 本意，等于把 ID 当 class 用用 ID 定位做布局，会卡死组件复用和 CSS 作用域隔离
比如你在某个模块里写了 #user-card { margin: 1rem; }，后来想把这个模块复制两份并排显示——结果只有左边那个有外边距，右边那个被浏览器“自动丢弃”了样式，因为 ID 重复后 CSS 规则只作用于首个元素。
- Shadow DOM 中 ID 不跨边界，但外部样式表无法穿透；若依赖 ID 做布局，组件一旦封装就失效
- CSS-in-JS（如 Emotion、Styled Components）默认不支持 ID 选择器生成局部作用域，ID 天然全局
- 设计系统或微前端场景下，不同团队共用同一 HTML 文档流时，ID 冲突概率极高，且排查困难
替代方案：什么时候该用 class，什么时候该用 data-* 属性
ID 不是不能用，而是不该为“样式定位”而存在。真正需要 ID 的场景其实很窄：锚点跳转（<a href="#section2"></a>）、ARIA 关联（aria-labelledby="label-id"）、或明确需要 getElementById 获取单个宿主节点。
- 布局和样式一律用
class：语义清晰、可复用、支持 BEM 等命名规范 - 需要 JS 精准识别某类元素但又不想污染样式类名？用
data-role="modal-close"，配合document.querySelector('[data-role="modal-close"]') - 如果真要保留“唯一性语义”，且需 CSS 生效，可用
[data-id="123"]，它既唯一又不违反 HTML 规范，还能避免全局污染
检查 ID 冲突的实操方法
别等上线才发现问题。本地开发阶段就能快速验证：
立即学习“前端免费学习笔记（深入）”；
- 控制台运行：
console.log([...document.querySelectorAll('[id]')].filter(el => document.querySelectorAll(`[id="${el.id}"]`).length > 1))，输出所有重复 ID 的元素 - VSC 插件 “Duplicate ID Validator” 或 ESLint 插件
eslint-plugin-jsx-a11y可静态检测 - Chrome DevTools → Elements 面板右键任意元素 → “Break on attribute modification”，再操作页面，看是否意外触发多次 ID 修改（常见于动态渲染 bug）
ID 的“唯一性”不是浏览器的建议，是解析逻辑的硬约束。它不报错，不代表没后果——尤其当 JS 和 CSS 对同一个 ID 产生不同预期时，问题往往延迟暴露，且难以复现。
