id选择器用于唯一不可复用的定位，类选择器用于可复用、语义化的样式分组；id必须全局唯一、权重100，仅适用于锚点、aria关联、表单绑定及js精准获取等不可替代场景，现代开发禁用id写css样式，应优先使用语义化类名与bem等规范控制权重。
类选择器和ID选择器不是“谁更好用”，而是“谁更合适”——ID用于唯一、不可复用的定位，类用于可复用、语义化的样式分组；混用或滥用会直接导致优先级失控和维护困难。
什么时候该用 #id 而不是 .class
ID 选择器本质是“单点强绑定”，只应出现在以下场景：
- 页面中**绝对唯一**的容器或入口点，比如
#header、#app、#main-content - 需要被 JavaScript 直接
document.getElementById()获取的元素（注意：现代开发更倾向用data-*属性 + 类选择器） - 在 CSS 中需**临时提升权重**（如调试时快速覆盖），但上线前必须重构掉
反例：#button-submit 用于多个提交按钮 —— 这违反 HTML 规范（ID 必须唯一），浏览器不会报错，但 CSS 优先级计算会失真，JS 行为也不可靠。
.class 的正确复用方式与权重控制
类选择器的威力不在“多写几个”，而在“组合得当”。优先级提升应靠结构化命名，而非堆砌选择器：
- 避免无意义叠加：
.btn.btn.btn虽然权重升到 30，但语义混乱且难维护 - 推荐 BEM 或类似规范：
.form__submit-button--primary一个类名就表达完整上下文 - 需要微调时，用嵌套类组合：
.card .card__title（权重 20）比.card-title（权重 10）更可控，且不依赖 DOM 深度
注意：[class~="active"] 这类属性选择器权重也是 10，和 .active 等价，但可读性差，除非处理动态 class 字符串，否则别替代类选择器。
ID 和类混用时的优先级陷阱
很多人以为 #nav .link 一定赢过 .nav-link，其实未必：
-
#nav .link权重 = 100 + 10 = 110 -
.nav-link权重 = 10 - 但
.nav .link（两个类）权重 = 20，仍低于 ID 组合
真正危险的是：一旦你在组件里用了 #modal，外部样式想覆盖它，就必须用 ID 或 !important —— 这等于主动放弃样式隔离。Vue/React 组件 Scoped CSS 或 CSS Modules 就是为规避这种耦合而生的。
调试时怎么快速判断哪个样式生效了
浏览器开发者工具里看“Computed”面板只是结果，要定位原因得看“Styles”侧边栏：
- 被划掉的声明 ≠ 无效，可能是被更高权重的同名属性覆盖
- 右侧显示的 specificity 值（如
0,1,0,0）比文字描述更可信 - 点击某条规则左侧的 checkbox 可临时禁用，观察 DOM 实时变化，比猜权重更快
最常被忽略的一点：伪类如 :hover、属性选择器如 [disabled] 权重也是 10，和类相等。所以 .btn:hover 和 .btn--disabled 是平级竞争，顺序决定谁胜出 —— 这比 ID 权重问题更隐蔽，也更常引发线上 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
