id不能重复是因为html规范将其定义为全局唯一标识符，浏览器执行document.getelementbyid时只返回首个匹配元素；class可重复因其本质是可复用的类别标签，用于语义分组与样式复用。
id 为什么不能重复，而 class 可以
根本原因在 HTML 规范里：id 是全局唯一标识符，浏览器遇到 document.getElementById("x") 时，只返回 DOM 中第一个匹配的元素，其余同名 id 完全不可见。这不是 bug，是设计使然。class 则没有这个限制——它本质是“标签”，描述元素属于哪一类，多个元素共享一个 class 是正常且预期的行为。
常见踩坑点：
- Vue/React 循环渲染中写死
id="modal"，结果页面生成 5 个同名 id，getElementById("modal")永远只拿到第一个 - 服务端渲染（SSR）和客户端 hydrate 阶段生成逻辑不一致，导致两个
id="header"同时存在 - 复制 HTML 片段后忘记改 id，比如从
<div id="nav"> 粘贴出三份却没重命名<p>验证方式很简单：打开控制台，运行 <code>document.querySelectorAll('[id="x"]')，如果返回长度大于 1，立刻修复。哪些场景必须用 id，不能用 class 替代
只有少数底层机制强制依赖 id，class 在这些地方完全无效：
-
<label for="email"></label>必须精确匹配<input id="email">——for属性不认 class、data-* 或 name - URL 锚点跳转，如
https://example.com#section2，浏览器锚点解析器只查找id="section2"，不会查class="section2"或data-id="section2" - ARIA 属性如
aria-labelledby="title-desc"、aria-controls="panel-1"，值必须指向有效的 id
注意：
id值不能以数字开头（id="1item"非法），含点号或冒号时 JS 获取需转义（getElementById("user\.email")）。class 才是日常样式的主力，但命名有硬约束
95% 的样式工作应该落在 class 上。不是因为“class 更好”，而是因为它语义正确、可复用、易组合、不破坏唯一性假设。
关键实践建议：
- 按 BEM 或类似逻辑命名：
card（块）、card__title（元素）、card--featured（修饰符） - 避免纯样式类：
class="red-text"把表现耦合进 HTML，换主题就得改结构；应改为class="alert-text"再由 CSS 控制颜色 - 允许多 class 共存：
class="btn btn--primary btn--large"比拼凑一堆 id 更灵活、更易维护 - class 名可用数字（只要不开头），但不要用点号、冒号——CSS 选择器会误解析
tabindex、contenteditable 这类全局属性和 id/class 是什么关系
它们同属 HTML 全局属性，但作用域和行为逻辑完全不同。
tabindex、contenteditable、hidden等 27 个属性（截至 2026 年 4 月 MDN 官方列表）是独立开关，不依赖 id 或 class 存在。容易混淆的点：
-
tabindex只对可聚焦元素（<button></button>、<a href></a>、<input>）默认生效；给<div> 加 <code>tabindex="0"才能使其进入 tab 流，设为-1则仅支持 JS 聚焦（el.focus()） -
contenteditable="true"后元素可编辑，但不会自动触发input或change事件，需监听blur或input（部分浏览器支持） -
hidden是布尔属性：写成hidden或hidden="hidden"效果一致；hidden="false"无效——浏览器只看是否存在，不解析值
真正容易被忽略的是：id 和 class 不是“功能开关”，它们是定位契约。一旦契约被打破（比如 id 重复），所有依赖它的机制——JS 查找、锚点跳转、ARIA 关联——都会静默失效，且很难被发现。
-
