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 的典型场景：
- 元素需要被锚点跳转（
<a href="#section2"></a>对应<div id="section2">） <li>表单控件与 <code><label></label>绑定（<label for="email">邮箱</label><input id="email">） - ARIA 属性引用（如
aria-describedby="error-msg"要求目标元素有对应id） - 样式复用（按钮、卡片、标题层级等通用视觉模式）
- JS 功能模块绑定（
class="js-modal-trigger"比id="open-modal-btn"更利于多实例） - BEM 或其他 CSS 方法论的基础单位（
class="card__title"） -
name：表单元素特有，不参与 CSS 选择（[name="username"]可以选，但不是原生选择器），主要用于表单提交时的字段名 -
data-属性：完全自定义，必须用属性选择器（[data-role="tooltip"]），不能用.tooltip或#tooltip匹配 -
role：仅用于 ARIA 语义，不影响样式或 JS 查找，除非显式写成[role="button"] -
type：只对<input>等少数标签有效，且值是预定义枚举（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（正确） vsbuttonclass-name（错误），后者会被当成一个叫buttonclass-name的标签名 - 使用中文或特殊符号命名
class/id：虽然 HTML5 允许，但 CSS 里要写成.你好或转义，JS 中getElementById("你好")虽可行，但团队协作和工具链（如 PostCSS、TypeScript 类型推导）大概率不支持
该用 class 的情况更常见：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
其他选择器属性容易被忽略的关键点
除了 id 和 class，还有几个 HTML 属性常被当“伪选择器”用，但行为和限制差异很大：
立即学习“前端免费学习笔记（深入）”；
实际写代码时最常踩的坑
真正难的不是记住语法，而是判断某个标识到底承担什么职责：是 DOM 定位？样式归类？无障碍关联？还是数据上下文？选错属性，后面调试花的时间远超写的时候省的那几秒。
