类选择器权重可控且可叠加，支持模块化组合与性能优化，避免ID选择器的耦合风险与覆盖难题，是语义、复用与协作的最佳平衡点。
类选择器的权重可控，不会意外锁死样式链
类选择器权重固定为 (0,0,1,0)，多个类叠加时线性累加（如 .btn.btn-primary 是 (0,0,2,0)），但高位始终为 0。这意味着它永远留有向上调整的空间：你可以用另一个类、属性选择器甚至伪类去覆盖，而不用碰 !important 或内联样式。
对比 ID 选择器：#submit 权重是 (0,1,0,0)，只要页面里存在任意一条含 ID 的规则（哪怕来自第三方 UI 库或 SSR 模板），你的 .btn.is-disabled 就大概率被静默压制——开发者工具里看到样式被划掉，却找不到源头。
- 运行
document.querySelectorAll('[id]')常能发现隐藏的 ID（比如#root、#app、#layout） - React/Vue 组件中动态生成的 ID 很难保证全局唯一，
document.getElementById可能只返回第一个匹配项 - 服务端渲染时重复 ID 会导致 HTML 校验失败，浏览器可能忽略后续同名 ID
类名天然支持模块化与语义组合
类选择器不依赖 DOM 结构，也不绑定元素类型，一个 .text-sm 可以用在 p、span、button 上；一个 .is-loading 可以和 .btn、.card、.form-field 自由组合。这种“原子化”能力是标签或 ID 选择器完全不具备的。
现代工程实践（BEM、CSS Modules、Tailwind）都建立在这个基础上：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- BEM 中
.menu__item--disabled明确表达层级与状态，不靠结构关系推导 - CSS Modules 自动生成哈希类名，避免全局污染，ID 无法做到这点
- Tailwind 的
flex gap-4 p-2 text-gray-700本质是一组高复用类选择器的拼装
浏览器从右往左匹配时，类选择器性能更稳
浏览器匹配 .card .header h2 时，会先收集所有 h2，再逐个向上查父级是否含 .header 和 .card。如果换成 div div h2（纯标签选择器），就得遍历全部 h2 并检查其完整祖先路径，开销明显上升。
而类选择器自带“锚点”效应：浏览器内部对 class 属性做了索引优化，.header 这样的条件比 div 更快收敛候选集。尤其在长列表或动态渲染场景下，这个差异会放大。
- 避免写
body > div > div > div > .content p这类超长后代链，它既难维护又拖慢匹配 - 不要为了“看起来结构清晰”硬套嵌套，用类明确表达意图更可靠
- 属性选择器如
[data-role="tooltip"]权重同级类，适合替代 ID 做 JS/CSS 协作锚点
ID 选择器只该用于 for/id 关联和锚点跳转
ID 的设计本意不是写样式，而是提供唯一可寻址标识。label 必须通过 for="email" 关联 input#email 才能保障表单可访问性；<a href="#section2"> 跳转也依赖 id="section2"。一旦把 ID 当样式钩子用，就等于把语义锚点和表现逻辑耦合在一起。
真正棘手的问题往往藏在边界处：
- UI 框架（如 Ant Design）可能悄悄注入
#layout .ant-layout-header，你写的.header规则直接失效 - 重置样式（reset.css）里若有
#app * { box-sizing: border-box }，会无意提高所有后代元素的权重基线 - 用
:is()或:where()包裹类选择器可以主动降权，但 ID 无法被这类函数“软化”
类选择器不是最“强”的，但它是唯一能在语义、复用、调试、协作之间保持平衡的选择。真正难的从来不是“怎么选中”，而是“选中之后，别人还能不能安全地改”。
