CSS多条件选择器需按状态流顺序叠加伪类，避免逻辑冲突，优先使用:is()/:where()提升可读性，注意伪类兼容性与优先级，禁用无效组合如:enabled:disabled。
CSS 多条件选择器（即组合多个伪类）的关键是按逻辑顺序叠加、避免冲突、注意优先级和可读性。写得清晰不是靠堆砌，而是让每个伪类各司其职、语义明确、易于维护。
一、基础写法：伪类按“状态流”顺序排列
浏览器会从左到右依次匹配所有条件，全部满足才生效。推荐按用户交互的自然流程排序，比如：:hover → :active → :focus → :disabled（常见状态流），而非随意打乱。
-
✅ 推荐：
a:hover:focus（悬停且获得焦点，如键盘 Tab 进入后又鼠标移入） -
❌ 混淆：
a:focus:hover虽语法合法，但语义反直觉，易被误读为“先聚焦再悬停”，实际效果相同但可读性差
二、组合伪类时注意兼容性与限制
不是所有伪类都能任意组合。核心原则：结构类（:nth-child）和状态类（:hover）可共存；但互斥状态不能同时成立（如 :hover 和 :active 在同一时刻可能重叠，但 :checked 和 :disabled 在表单中可共存）。
-
✅ 可行：
input[type="checkbox"]:checked:disabled（禁用且已勾选） -
⚠️ 注意：
button:enabled:disabled永远不匹配（逻辑矛盾） -
✅ 安全组合技巧：用
:is()或:where()提升可读性，例如：button:is(:hover, :focus-visible):not(:disabled)
三、提升可读性的实用技巧
长链伪类容易失控。用以下方式保持清晰：
立即学习“前端免费学习笔记（深入）”；
-
换行缩进写法（CSS 预处理器或现代编辑器支持）：
nav a
:hover
:not(.disabled)
:is([aria-current="page"], [aria-current="true"]) -
抽离复用逻辑到类名：对复杂组合，宁可加一个语义类（如
.state-hover-active），也不硬写:hover:active:enabled -
注释关键意图：
/* 点击态下的可交互按钮（排除禁用/只读） */
button:active:not(:disabled):not([readonly])
四、警惕常见陷阱
看似合理，实则无效或易出错：
-
❌ 错误嵌套伪类：
a:hover::before:hover—— 伪元素不支持再加:hover，应写成a:hover::before即可 -
❌ 忽略 specificity 影响：
input:required:focus比input:focus优先级高，但若和.form-input:focus同时存在，后者会赢（类选择器 vs 伪类） -
✅ 替代方案：用
:has()（需检查浏览器支持）表达“父容器含某状态子元素”，例如：form:has(input:invalid) .submit-btn { opacity: 0.6; }
