多个伪类连写表示“同时满足所有条件”，如a:hover:focus需元素既是链接、又被悬停且获得焦点；:not()嵌套多伪类存在兼容性问题；:has()和:is()可简化复杂选择器逻辑。
多个伪类连写时的匹配逻辑是什么
多个伪类连写（如 a:hover:focus）表示“同时满足所有条件”，不是“或”关系。浏览器会逐个校验状态：元素必须是链接、当前被悬停、且同时获得焦点，三个条件缺一不可。这种写法常见于增强可访问性，比如只在键盘聚焦+悬停时才显示辅助提示。
容易踩的坑：:hover:active 几乎不会触发——因为鼠标按下瞬间悬停仍存在，但 :active 是瞬态，且部分浏览器对连续状态判断有微小延迟；更稳妥的是用 :hover, :active 并列写法表达“任一成立”。
表单验证场景下:checked + :disabled + :invalid 怎么协同
真实表单中常需叠加控制，比如“仅对未禁用、已勾选、且内容无效的复选框显示错误边框”：
input[type="checkbox"]:checked:not(:disabled):invalid {
border: 2px solid #f44336;
}
这里关键点在于顺序和否定位置：:not(:disabled) 必须紧挨 :checked，否则会被解析为“所有非禁用元素中已勾选的”，语义偏移。而 :invalid 只对支持校验的表单控件（如 input[type="email"]）有效，对 checkbox 默认不触发——除非你手动设置 setCustomValidity()。
-
:checked本身不触发原生校验，需配合required或 JS 设置有效性 -
:disabled优先级高于:invalid，禁用元素不会进入校验流程 - 现代浏览器中
:invalid在用户首次交互后才生效，避免过早提示
:not() 嵌套多个伪类时的兼容性陷阱
像 button:not(:hover, :focus) 这种写法在 Chrome 120+、Firefox 115+ 支持良好，但 Safari 16.4 之前只接受单参数，会直接忽略整条规则。更安全的写法是拆成两条：
button { opacity: 0.7; }
button:hover,
button:focus {
opacity: 1;
}
注意：:not() 内部不能出现伪元素（如 ::before）或另一个 :not()，否则整个选择器失效。例如 div:not(.a:not(.b)) 是非法的。
实际开发中，如果目标是“排除所有带 .ignore 类或处于 :disabled 状态的按钮”，建议改用属性标记：button:not([data-ignore]):not(:disabled)，把状态映射到属性上，可控性更强。
用 :has() 和 :is() 简化长链伪类组合
CSS :has()（父元素匹配子状态）和 :is()（简化多选器）能大幅降低嵌套复杂度。比如要给“包含已勾选复选框的列表项”加背景色：
li:has(input[type="checkbox"]:checked) {
background-color: #f0f9ff;
}
对比旧写法需要 JS 或额外 class，现在纯 CSS 就能响应子元素状态变化。
:is() 则适合归并同类逻辑：button:is(:hover, :focus-visible, :active) 比写三遍更简洁，且支持动态更新——只要任一状态成立即匹配。
不过要注意：:has() 目前不支持在 CSS 动画或 transition 中作为触发条件，且无法与 :not() 混合用于同一层级选择（如 div:not(:has(p)) 合法，但 div:not(:has(p:hover)) 不合法）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
