17370845950

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; }