id 是页面唯一标识，用于锚点、label 绑定和 ARIA 关联；class 是可复用分类，适用于样式、JS 批量操作及组件化开发。

id 和 class 的本质区别在哪

id 是元素在整页中的唯一标识，一个页面里不能有两个元素用同一个 id 值；class 是可复用的分类标记，多个元素可以共用同一个 class 名，一个元素也能同时拥有多个 class（用空格分隔）。

• 浏览器强制校验 id 唯一性：重复 id 不报错，但 document.getElementById() 只返回第一个匹配元素，label 的 for 属性、ARIA 的 aria-labelledby 等依赖 id 关联的功能会失效
• class 没有唯一性约束，适合样式复用、JS 批量操作（如 document.querySelectorAll(".btn")）
• CSS 选择器权重上，#header 比 .header 高，过度使用 id 会导致样式难以覆盖，尤其在组件化开发中易引发冲突

什么时候必须用 id，什么时候该用 class

必须用 id 的典型场景：

• 元素需要被锚点跳转（ 对应
  ）
• 表单控件与 绑定（邮箱）
• ARIA 属性引用（如 aria-describedby="error-msg" 要求目标元素有对应 id）

该用 class 的情况更常见：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 样式复用（按钮、卡片、标题层级等通用视觉模式）
• JS 功能模块绑定（class="js-modal-trigger" 比 id="open-modal-btn" 更利于多实例）
• BEM 或其他 CSS 方法论的基础单位（class="card__title"）

其他选择器属性容易被忽略的关键点

除了 id 和 class，还有几个 HTML 属性常被当“伪选择器”用，但行为和限制差异很大：

• name：表单元素特有，不参与 CSS 选择（[name="username"] 可以选，但不是原生选择器），主要用于表单提交时的字段名
• data- 属性：完全自定义，必须用属性选择器（[data-role="tooltip"]），不能用 .tooltip 或 #tooltip 匹配
• role：仅用于 ARIA 语义，不影响样式或 JS 查找，除非显式写成 [role="button"]
• type：只对 等少数标签有效，且值是预定义枚举（text、number、checkbox），不是任意字符串

实际写代码时最常踩的坑

• 把 id 当作样式钩子反复使用：比如给每个菜单项加 id="menu-item-1"、id="menu-item-2"，结果后期要统一改样式时只能写一堆高权重规则，或改 JS 逻辑——这时候应该用 class="nav-item" + 数据属性（data-id="1"）
• 在 Vue/React 组件中误用全局 id：服务端渲染或多次挂载时可能产生重复 id，浏览器不会报错，但无障碍检测工具会告警，且 getElementById 行为不可靠
• 混淆 class 和标签名选择器：写成 button.class-name 本意是“带 class 的 button”，但如果忘了空格写成 button.class-name（正确） vs buttonclass-name（错误），后者会被当成一个叫 buttonclass-name 的标签名
• 使用中文或特殊符号命名 class/id：虽然 HTML5 允许，但 CSS 里要写成 .你好 或转义，JS 中 getElementById("你好") 虽可行，但团队协作和工具链（如 PostCSS、TypeScript 类型推导）大概率不支持

真正难的不是记住语法，而是判断某个标识到底承担什么职责：是 DOM 定位？样式归类？无障碍关联？还是数据上下文？选错属性，后面调试花的时间远超写的时候省的那几秒。