链式类选择器通过紧连类名（如.btn.primary.large）精准匹配同一元素的多个类，空格则表示后代关系；特异性为类数×10，但不敌id；语义唯一或bem/原子css场景应避免冗余链式。
多个类名写在同一个元素上，CSS怎么选中它
直接把类名连着写，中间不加空格，就能匹配同时拥有这些类的元素。比如 <div class="btn primary large">，用 <code>.btn.primary.large 就能精准命中——它不是选“有 btn 的、又有 primary 的、又有 large 的任意元素”，而是只选“三个类全在同一个 class 属性里”的那个 <div>。
<p>常见错误是写成 <code>.btn .primary .large（带空格），这其实是后代选择器，会去匹配嵌套三层的结构，完全不是一回事。
- 空格分隔 → 后代关系（层级查找）
- 紧挨着写 → 同一元素多类（交集匹配）
- 顺序无关 ——
.primary.btn和.btn.primary效果完全一样
链式类选择器的优先级怎么算
每个类名贡献 10 点特异性（specificity），链得越长，权重越高。比如 .card.header.active 是 3 × 10 = 30；而 .card 只有 10，#sidebar 是 100（ID 选择器），所以即使链了三个类，也还是打不过一个 ID。
注意：它和属性选择器 [class~="btn"] 或伪类 :is(.btn, .link) 的权重不同，后者不会叠加类的 10 分，得单独算。
-
.a.b.c→ 特异性：0,0,3,0（即 30） -
.a.b.c:hover→ 0,0,3,1（伪类再加 1） - 哪怕写成
div.a.b.c，标签名只加 1，还是远低于 ID 或内联样式
什么时候不该用链式类选择器
当类名本身语义已足够唯一，或者项目用了 BEM 这类命名规范时，硬链多个类反而暴露耦合、增加维护成本。比如 .menu__item--active 本就是一个完整状态类，再写成 .menu__item.menu__item--active 不但冗余，还容易因漏掉某个类导致样式失效。
更隐蔽的问题是动态类名场景：Vue/React 中用 className={\`btn \${isLoading ? 'loading' : ''}\`}，如果 CSS 写成 .btn.loading，那 loading 类没生效时，整个规则就彻底不触发——不如用 .btn 做基础样式，再单独写 .btn.loading 覆盖状态。
- 组件库或原子 CSS（如 Tailwind）中，链式写法基本不用，靠单类组合
- 用 JS 切换类时，确保链式依赖的每个类都稳定存在，否则样式会意外丢失
- 调试时看 computed styles，如果某条链式规则没生效，先检查元素当前 class 属性是否真包含全部类名
浏览器兼容性与实际限制
所有现代浏览器都支持无限长度的链式类选择器，但 IE8 及更早版本只支持最多 4095 个选择器（不是类名个数），且对链式本身无额外限制。真正卡住你的往往不是语法，而是可读性和维护性。
比如 .layout.container.main-content.sidebar-collapsed.theme-dark.prefers-reduced-motion 看似合法，但没人能记住它代表什么状态，重构时也不敢动——这种写法本质上是在用 CSS 模拟状态机，已经越界了。
- CSS 本身不校验类名是否存在，
.a.b.c.d.e.f即使页面里一个都没出现，也不会报错 - 构建工具（如 PostCSS）一般也不会警告冗余链式规则，得靠人工或 Lint 规则约束
- 真正难的是判断“这个链是不是必要”：它解决的是样式冲突，还是只是偷懒没拆清关注点
