伪类顺序错误（lvha）会导致:hover或:active不生效，必须按:link→:visited→:hover→:focus→:active顺序书写；选择器列表中任一无效则整条规则被忽略；:has()等现代伪类需降级兼容。
伪类顺序写错导致:hover或:active不生效
浏览器对 :link、:visited、:hover、:active 这四个交互伪类有硬性顺序要求（LVHA），顺序错一个，整条规则可能被直接忽略——尤其在旧版 Safari 或 Android WebView 中。
常见错误现象：a:hover:active 有效，但 a:active:hover 在 Chrome 90 以下版本里完全不触发；表单元素 input:focus:invalid 没反应，拆成 input:focus 却能生效。
-
:link和:visited必须放在最前，且:link要在:visited前 -
:hover必须在:active前，否则点击瞬间无法捕获激活态 -
:focus推荐插在:hover后、:active前，符合用户操作流（悬停 → 聚焦 → 点击） - 现代伪类如
:focus-within、:has()不受 LVHA 约束，但别和它们混在同一个选择器链里——比如button:hover:focus-within:active容易被部分浏览器跳过
厂商前缀伪类和其他选择器共用时整个规则失效
当你写 input:read-only, input:-moz-read-only 这种逗号分隔的选择器列表，Chrome 会因为不认识 input:-moz-read-only 而直接丢弃整条规则，连带 input:read-only 也失效。
这不是兼容性“没效果”，而是 CSS 解析器的规范行为：只要选择器列表中任一成员无效，整个规则块被忽略。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须拆成独立规则：
input:read-only和input:-moz-read-only各自声明样式 - 不要试图用
@supports包裹混合选择器——@supports (selector(:read-only))无法改变选择器列表本身的解析逻辑 - PostCSS 的
autoprefixer不处理伪类前缀，它只加属性前缀（如transform），伪类前缀需手动补全并拆分
:nth-child 与 :last-child 混用导致结构选择器不匹配
.item:last-child 只匹配父容器中**最后一个子元素**且 class 为 item 的节点；如果最后一个子元素是 <div class="spacer"></div>，那这条规则就永远不生效——不是 bug，是设计如此。
想选“倒数第二个 .item”，不能靠 :last-child 加条件，得用 :nth-last-child(2) 或更稳妥的 :nth-of-type。
-
:nth-last-child(2)匹配的是父元素下**所有子元素中倒数第二个**，不管类型 -
:nth-of-type(2)匹配的是同类型元素中的第二个，更可控但语义不同 - 调试时用 DevTools 的 “Force element state” 功能看不出问题，得去 Elements 面板手动检查目标元素是否真满足选择器条件
现代伪类如 :has() 在老浏览器中静默失败
:has() 目前仅 Chrome 105+、Safari 15.4+、Firefox 119+ 支持，且不能出现在选择器开头（如 :has(+ .error) .field 合法，:has(.error) .field 不合法）。更重要的是：不支持的浏览器不会报错，而是直接跳过整条规则——你根本看不到控制台警告。
这意味着，如果你把关键样式（比如表单校验高亮）全押在 :has() 上，IE 和旧 Edge 用户看到的就是无样式裸奔状态。
- 关键交互样式必须降级：用 JS 监听事件 + 切换 class，而不是只依赖
:has() - 避免
:has()和 LVHA 链耦合，例如form:has(.error):hover兼容性风险极高，建议拆成form:hover和form.has-error两套规则 - 可以用
@supports selector(:has(*))做渐进增强，但注意：这个语法本身在 Safari 15.2 及更早版本也不支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
