id用于唯一标识元素，适用于锚点、label关联、高频JS访问；class用于复用样式和状态，支持多类共存与批量操作，CSS权重更低更灵活，推荐优先使用。
id 是唯一标识，class 是可复用标签
一个页面里
值必须全局唯一，重复会导致
返回第一个匹配项（不可靠），也会影响
关联
、锚点跳转（
）等行为。而
天然支持复用：同一个
可以加在 5 个
上，一个元素也能同时拥有多个
，比如
。
CSS 优先级和选择器写法不同
在 CSS 中用
开头，如
；
用
开头，如
。权重上，
选择器是
，
是
——这意味着哪怕你写十个
连写，也压不过一个
的样式声明。实际开发中，过度依赖
会抬高特异性，让后续覆盖变得别扭，尤其在组件化或第三方样式介入时容易失控。
JavaScript 获取方式差异明显
直接返回单个元素，快且确定；而
返回的是类数组（
），得手动遍历或用
取值，稍麻烦。更现代的做法是统一用
（取第一个）或
（取全部），这时
反而比
更灵活——尤其当你需要批量操作同类元素时。
什么时候该用 id，什么时候该用 class
用
的场景很明确：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
页面内唯一锚点，如
+
JS 需要精准、高频访问的单个元素（如主画布容器
）
表单中
的
属性必须指向唯一
其余绝大多数情况——布局、状态、组件类型、视觉样式——都该交给
。BEM 命名（如
、
）就是建立在这种复用逻辑上的，不是为了“看起来高级”，而是避免样式污染和维护断裂。
立即学习
“
前端免费学习笔记（深入）
”；
最容易被忽略的一点：浏览器不校验
是否真的唯一，但一旦重复，
和 CSS 锚点行为就不可预测；而
没有这种隐性风险，只是命名混乱会让团队协作成本陡增——所以别省那几个字母，写清楚语义，比如用
而不是
。
iddocument.getElementById()labelinput#section1classclassdivclassclass="btn btn--primary js-modal-trigger"id##headerclass..headerid0,1,0,0class0,0,1,0.nav-link#main-naviddocument.getElementById("user-form")document.getElementsByClassName("form-field")HTMLCollection[0]document.querySelector(".form-field")document.querySelectorAll(".form-field")classidid联系我labelforidclass.card__title.card--hoveridgetElementByIdclassclass="search-input"class="blue-border"