伪类连用需紧挨（如:hover:disabled），空格表示后代选择器；:is()可简化多选择器、降权重，:where()提供零权重保底；属性选择器优先于class管理状态；自定义属性适合多维状态组合，但复杂逻辑应交由JS处理。
多个伪类连用时的空格陷阱
写 :hover + :disabled 时加空格就失效，这是最常踩的坑。带空格表示后代选择器，而 button:hover:disabled 是要匹配“既 hover 又 disabled”的同一个元素，必须紧挨着写。
常见错误现象：button:hover :disabled（中间有空格）——实际在找 button 里的 disabled 子元素，根本不会生效。
- 正确写法：
button:hover:disabled、a:focus:not(:visited) - 顺序无关，但语义要通顺：一般把结构类（
:nth-child）放前面，状态类（:hover）放后面 - 注意浏览器兼容性：
:has()目前仅 Chromium 105+ 和 Safari 15.4+ 支持，别在生产环境直接当主力用
用 :is() 替代重复选择器组
以前写 h1.title, h2.title, h3.title，现在可以直接缩成 :is(h1, h2, h3).title。它不是语法糖，而是真正降低选择器权重、提升可读性的实用方案。
使用场景：统一处理多级标题、表单控件状态、响应式断点下的不同容器。
立即学习“前端免费学习笔记（深入）”；
-
:is()内部任一选择器失败，整个函数就无效；想“保底”得用:where()（它会忽略内部权重，全设为 0） - 不能嵌套：
:is(:is(a, b))不合法，但:is(a, :not(b))是允许的 - 别在
:is()里写太长的选择器链，可读性会断崖下跌
属性选择器配合布尔型属性简化条件
HTML 里写了 data-loading 或 aria-busy="true"，CSS 就不该再额外加 class。直接用属性选择器更可靠、更少耦合。
常见错误现象：JS 切换 loading 状态时漏掉 class 同步，导致样式不同步；或者用 [data-loading="true"] 却忘了 HTML 里其实只写了 data-loading（无值）。
- 布尔属性存在即为真：
[data-disabled]匹配<input data-disabled>，比[data-disabled="true"]更健壮 - 区分大小写：HTML 属性名不区分大小写，但 XML/XHTML 和 SVG 中区分，稳妥起见全小写
- 性能影响极小，现代浏览器已对属性选择器做了大量优化，不用怕
用自定义属性（--*）驱动复杂状态组合
当需要同时响应“主题色 + 折叠态 + 权限等级”三个维度时，class 组合爆炸，而 CSS 自定义属性配合 calc() 和 var() fallback 就能线性控制。
使用场景：管理深色模式切换、动态主题、权限隔离 UI、A/B 测试样式分支。
- 不要直接在 :root 写死所有组合值，用 JS 动态设置更灵活：
el.style.setProperty('--state', 'editing') - fallback 值别偷懒写
var(--x, red)，而应写var(--x, var(--fallback-color))，方便全局统一降级 - 注意计算时机：
var(--a, calc(var(--b) * 2))是非法的，calc()不能出现在 fallback 位置
CSS 的条件组合本质是“缩小匹配范围”，而不是“叠加逻辑门”。越想用 CSS 模拟 if-else，越容易写出难维护的选择器链。真到三重以上状态交织，该抽组件、该上 JS 控制就上，别硬扛。
