.class选择器直接匹配所有含指定class属性的元素，如.btn匹配class="btn"的所有元素；误加空格会变成后代选择器；多类共存时按权重（类为10）和CSS声明顺序决定覆盖规则。
用 .class 选择器直接匹配所有同类组件
只要组件在 HTML 中带有相同的 class 属性值，比如 class="btn"，CSS 里写 .btn 就能一次性控制全部。不需要 JS、不需要重复写规则，浏览器原生支持。
常见错误是误加空格写成 .btn （末尾有空格）或 .btn .icon（中间有空格），这会变成“后代选择器”，只匹配 .icon 在 .btn 内部的情况，而不是所有带 btn 类的元素。
-
.btn→ 匹配所有含class="btn"的元素 -
.btn.primary→ 只匹配同时含btn和primary两个类的元素（顺序无关） -
.btn, .link→ 同时匹配两类，逗号分隔，别漏空格和逗号
多个类名共存时，样式优先级怎么算
当一个组件写了多个 class，比如 class="btn btn--large is-disabled"，浏览器会把所有匹配到的规则叠加应用，但冲突属性以“权重高”的为准。类选择器权重是 10，比标签选择器（1）高，比 ID（100）低。
容易踩的坑是以为后写的 class 样式一定生效——其实不是。比如 .btn { color: blue; } 和 .is-disabled { color: gray; } 同时存在，color 最终取哪个，取决于它们在 CSS 文件里的顺序（同权重时后者覆盖前者），而不是 HTML 中 class 出现的顺序。
立即学习“前端免费学习笔记（深入）”；
- 权重相同：按 CSS 文件中声明顺序，后出现的生效
- 想强制覆盖？加
!important（不推荐，但调试时可用） - 避免靠猜顺序，把基础样式（如
.btn）放前面，变体（如.btn--large）放后面
用 BEM 命名让批量样式更可控
真实项目里，“同类组件”往往不是简单靠一个 class 就能区分清楚。比如按钮有默认、大号、危险、加载中等状态，全塞进 .btn 容易互相干扰。BEM（Block__Element--Modifier）这类命名约定，本质是靠类名结构表达层级和状态，让 CSS 更易批量维护。
例如统一用 btn 作 block 名，所有按钮相关类都以它开头：btn、btn__icon、btn--primary、btn--loading。这样你可以在 CSS 里写 [class^="btn--"] 批量重置 modifier 的某些属性，或者用 .btn:not(.btn--disabled) 精确排除某类。
-
[class^="btn--"]→ 匹配所有 class 以btn--开头的元素（注意：需确保没有其他类干扰开头匹配） - 不要依赖
class*="btn"（包含匹配），可能误中sub-btn-group这种 - BEM 不是银弹，但能让“批量改样式”这件事从碰运气变成可预期
动态添加类名时，CSS 规则没生效？检查是否遗漏了关键点
JS 动态加 class（比如 el.classList.add("btn--hover")）后样式没反应，大概率不是 JS 问题，而是 CSS 没写对或被覆盖了。最常忽略的是：新 class 对应的规则压根没定义，或者定义在了被注释/未加载的 CSS 文件里。
另一个隐蔽问题是浏览器缓存了旧 CSS，尤其是开发时改了样式但没清缓存，看着 JS 执行成功，实际渲染的还是老规则。还有就是 shadow DOM 场景下，普通 .btn 选不到组件内部的节点，得用 :host(.btn) 或 ::slotted(.btn)。
- 打开 DevTools → Elements 面板，确认元素上确实有那个 class 名
- 再切到 Styles 面板，看对应规则是否被划掉（表示被覆盖）或根本没出现（说明选择器没匹配上）
- 用
getComputedStyle(el).color在 Console 里直接查最终计算值，比肉眼判断靠谱
