:hover写在:disabled前面会导致样式完全不生效，因为伪类是逻辑“与”关系，禁用元素无法触发hover，条件恒假，整条规则被跳过而非覆盖。
为什么:hover写在:disabled前面会导致样式完全不生效
因为浏览器在匹配伪类选择器时，是做逻辑“与”判断：button:disabled:hover 意味着“按钮既被禁用，又处于悬停状态”，但禁用状态下的元素无法触发 :hover —— 这个条件永远为假，整条规则直接被跳过，不是被覆盖，而是根本不参与匹配。
常见错误写法：input:disabled:focus、a:visited:hover（:visited 不能和 :hover 同时成立）、button:active:disabled。
-
:disabled、:read-only、:checked等状态类必须放在最前 -
:hover、:focus、:active等交互类紧随其后 -
:focus-visible建议紧跟:focus，避免被:focus规则意外重置
LVHA顺序不是万能的，:focus-within和:has()怎么放
LVHA（Link → Visited → Hover → Active）只适用于传统状态/交互伪类。现代伪类如 :focus-within 和 :has() 不受此约束，因为它们描述的是关系或嵌套条件，而非单一元素状态。
但混用时容易踩坑：
-
:focus-within可以放在:hover前或后，取决于你希望哪个状态优先生效（例如nav:hover:focus-within表示“导航栏被悬停且其内部有聚焦元素”） -
:has()目前仅 Chrome 105+ / Safari 15.4+ 支持，且不能出现在选择器开头，比如:has(> .item):hover合法，但:has(> .item) span会报Invalid selector - 推荐拆开写：
button:hover { … }和button:focus-within { … }分开定义，比连写更可控、更易调试
:not()和其他伪类混用时，顺序错位会引发语义偏差
:not() 的参数本身是一个完整选择器，顺序一乱，语义就变了。比如 input:not(:disabled):hover 是“可交互的输入框在悬停时”，而 input:hover:not(:disabled) 在语法上合法，但某些旧版 Safari（15.4 之前）会解析不稳定，且阅读时容易误判逻辑。
-
:not()应包住整个状态判断，而不是把交互伪类放外面 - 禁止在
:not()内写复合伪类，如:not(:hover:focus)是无效语法（CSS 不支持伪类逻辑“或”） - 当需要排除多个状态时，用嵌套
:not()：例如button:not(:disabled):not(:loading)，不要写成button:not(:disabled, :loading)（逗号分隔在:not()里不被支持）
调试伪类失效，别靠猜，用 DevTools 强制触发
遇到伪类不生效，第一反应不该是重写样式，而是验证它是否真被浏览器识别并匹配。
- 打开 DevTools → Elements 面板，右键目标元素 → “Force element state”，手动勾选
:hover、:focus等 —— 若能强制生效，说明问题出在触发条件（比如父元素pointer-events: none或元素不可交互） - 在 Styles 面板中看被划掉的样式，点旁边小箭头展开，常显示
Invalid selector或Ignored due to invalid order - 把多伪类选择器拆开测试：把
a:visited:hover:active拆成a:visited、a:hover、a:active单独验证，快速定位哪个伪类卡住了整条链
真正难缠的不是顺序本身，而是不同伪类之间的隐含互斥关系 —— 比如 :disabled 和 :focus 天然冲突，:visited 和 :hover 在部分浏览器中受安全策略限制。这些细节不看规范、只靠经验很容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
