id属性必须唯一，因为document.getElementById等机制均按“找到第一个即停止”设计，重复id会导致JS取值错误、CSS样式不可靠、锚点跳转失效及无障碍功能紊乱。
id 属性必须唯一，不是为了“符合规范”而规范，而是因为所有依赖它的机制——document.getElementById、#my-id CSS 选择器、https://page.com#my-id 锚点跳转、aria-labelledby 关联——都只按“找到第一个就停”来设计。
document.getElementById 只返回第一个匹配元素
这个函数名字里就写着“Element”（单数），浏览器实现也严格遵循：遇到重复 id，它不会报错，也不会返回列表，而是静默返回 DOM 中最先出现的那个元素。
常见错误现象：
- 表单里多个提交按钮各自带一个
wp_nonce_field，结果全用了id="save-account-details-nonce"—— JS 脚本调用document.getElementById('save-account-details-nonce')永远只拿到第一个区域的 nonce 值 - 动态渲染列表项时，用循环写死
id="item"，后续想用 id 绑定某个具体项的事件或状态，根本无法精准命中
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远检查返回值：
const el = document.getElementById('submit-btn'); if (!el) console.warn('找不到 #submit-btn'); - 不要在
<script>标签未加defer且放在<head>里时调用，否则大概率返回null - 若需操作多个同类元素，改用
class或data-*属性 +querySelectorAll
#my-id CSS 选择器行为不可靠
CSS 规范允许 #my-id 同时作用于多个同名 id 元素，但这属于“未定义行为”的灰色地带。不同浏览器、不同版本可能表现不一：有的全生效，有的只对第一个应用，有的在特异性计算中出错。
使用场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 你写
#nav { background: blue; }，本意是控制顶部导航栏，但如果页面某处不小心插入了另一个id="nav"的 div，它也会变蓝——而你完全没意识到 - 当
#modal和.modal同时存在样式冲突时，重复id会让调试器显示“多个元素命中同一规则”，但无法判断哪个是预期目标
参数差异与影响：
-
id选择器特异性为 100，class是 10，element是 1；重复id不会提升权重，反而破坏“一个规则对应一个元素”的可预测性 - 构建工具（如 CSS-in-JS）或 SSR 渲染中，重复
id可能导致服务端生成的哈希类名与客户端不一致，触发 hydration mismatch
锚点跳转和无障碍技术直接失效
点击 <a href="#section-2">跳转</a> 时，浏览器内部逻辑就是“查找第一个 id="section-2" 元素并滚动到它”。如果该 id 出现在页首 banner、中间卡片、页脚说明里各一次，用户永远只能跳到 banner。
可访问性方面更严重：
-
<label for="email">必须指向唯一id="email"的<input>，否则屏幕阅读器会随机关联或静默失败 -
aria-describedby="error-1"若指向多个id="error-1"，辅助技术可能读出全部错误文本，或只读第一个，行为完全失控
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的 Console 输入
document.querySelectorAll('[id="my-id"]').length快速验证是否唯一 - CI 流程中加入 HTML 验证步骤（如
html-validate），检测duplicate-id规则 - WordPress 等 CMS 中，避免直接复用
wp_nonce_field的默认id，显式传入唯一字符串：wp_nonce_field('save_profile', 'profile-nonce-' . $user_id)
真正容易被忽略的点是：浏览器不阻止重复 id，控制台警告常被当成“无关紧要”，但一旦 JS 绑定、CSS 覆盖、锚点跳转、辅助功能中任一环节出问题，排查路径会绕很大弯路——你得先想到“是不是 id 重复了”，而不是直接看逻辑代码。
