ID与类选择器怎么选？复用性与特异性对比解析

ID选择器虽具高特异性与唯一性，却因复用受限、易引发JavaScript逻辑错误、难以维护及可访问性风险，在现代前端开发中已逐渐被弃用于样式和常规交互；类选择器凭借高复用性、语义化命名（如BEM）、良好性能与SSR兼容性，成为CSS和JS操作的首选方案——真正不可替代的ID仅保留于锚点跳转、ARIA属性关联和表单标签绑定等核心无障碍场景，明智的开发者早已用data属性和语义化class取代ID，换取更健壮、可扩展、可持续的代码体系。

类选择器能复用，ID选择器必须唯一

一个 class="btn" 可以用在 20 个按钮上，浏览器完全接受；但 id="submit-btn" 在整个页面里只能出现一次。重复 ID 不会报错，但后果很实在：document.getElementById('submit-btn') 永远只返回第一个匹配元素，后续 JS 逻辑可能直接中断；CSS 层叠时，重复 ID 的样式可能被忽略或只作用于首个元素。

常见错误现象：

• 写了 #nav li a 却没生效——HTML 里其实是 class="nav"，不是 id="nav"
• 多个弹窗都加了 id="modal"，结果只有第一个能关掉，其余 JS 事件全失效

ID选择器权重是100，类选择器是10，别靠它“赢”样式

权重不是性能指标，而是层叠规则里的计分卡。#header .nav-item 权重是 100+10=110，而 .header .nav-item 是 10+10=20。哪怕你写十个类，也压不过一个 ID ——这不是设计缺陷，是规范使然。

容易踩的坑：

• 为“确保按钮变蓝”，写了 #save-btn { color: blue; }，结果后期想加主题色时发现 .theme-dark .btn 根本覆盖不了它
• 调试时加 !important 看效果，上线前忘了删，结果别人加个 #form .btn 就又得加更狠的 !important，形成恶性循环
• 用 body #main .title 这种“降权写法”试图平衡，反而让选择器更难读、更难维护

现代开发中，ID基本只留给锚点和ARIA关联

真正不可替代的 ID 场景就那么几个：label[for="email"] 必须对应 input#email，否则屏幕阅读器无法关联；aria-labelledby="tooltip-1" 依赖 ID 的唯一性； 跳转也靠它。除此之外，CSS 和 JS 都该绕着 ID 走。