现代浏览器（chrome 105+、safari 15.4+、firefox 121+）支持用label:has(input:focus)联动标签样式，但要求与存在真实dom后代关系或通过for/id显式绑定，且safari对嵌套结构有延迟，firefox暂不支持:valid等复合伪类。
用 :has() 检测 <input> 是否获得焦点并联动 <label></label>
直接上结论：现代浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）已支持用 :has() 在 <label></label> 上检测其包裹或关联的 <input> 状态，无需 JS 就能实现“聚焦时标签变色”。关键在于正确组织 HTML 结构和选择器写法。
常见错误是把 :has() 写在 <input> 上（它不接受伪类作为子选择器），或者用错关系——<label></label> 必须能通过 DOM 关系“看到”目标 <input>。
- ✅ 推荐结构：用
for属性显式绑定，<label for="name">Name</label><input id="name"> - ✅ 有效选择器：
label:has(input:focus)（注意冒号前无空格） - ❌ 无效写法：
label:has(> input:focus)（>在:has()内不被支持） - ⚠️ 注意：若
<input>是<label></label>的子元素（即包裹式），可用label:has(input:focus)；但 Safari 对嵌套过深的结构偶有延迟，建议优先用for/id显式关联
处理空值、验证态等其他输入状态
:has() 不限于 :focus，还能组合 :valid、:invalid、:placeholder-shown 等伪类，实现更精细的视觉反馈。但要注意浏览器对复合伪类的支持粒度。
-
label:has(input:focus)→ 聚焦时高亮 -
label:has(input:not(:placeholder-shown))→ 输入非空时变色（需确保input有placeholder） -
label:has(input:valid)→ 表单验证通过后生效（依赖required、type="email"等原生校验） - ⚠️ Firefox 目前不支持
:has(input:valid)中的:valid（仅支持:focus和:checked等基础伪类），实际使用前建议用caniuse.com/css-has查当前兼容表
避免 :has() 性能陷阱和样式穿透问题
:has() 是“父选择器”，浏览器需向上遍历 DOM 树，频繁使用或嵌套过深可能触发重排/重绘。尤其在表单字段多、滚动区域里，要克制滥用。
- 不要写
body:has(label:has(input:focus))这类跨层级选择器——性能差且语义混乱 - 避免在动画帧内反复触发（比如配合
transform或opacity动画），:has()不是硬件加速属性 - 如果标签色变化需过渡效果，直接在
label上加transition: color 0.2s即可，:has()本身不阻断 CSS 过渡 - 注意 specificity：
label:has(input:focus)的权重高于普通label，但低于label[for]或label.classname，必要时加类名提升可控性
回退方案：当 :has() 不可用时怎么保底
没有 JavaScript 的纯 CSS 回退非常有限——:has() 一旦不支持，整个规则会被整条忽略。所以必须设计降级逻辑，而不是指望“部分生效”。
- 最稳妥方式：用
@supports selector(:has(*))包裹全部:has()相关样式，里面写增强效果；外面保留基础样式（如默认灰色标签） - 别试图用
:focus-within替代：它要求<label></label>包裹<input>，且无法区分“是 input 聚焦还是 label 内其他元素聚焦” - 如果项目必须支持旧浏览器，JS 仍是唯一可靠路径：监听
focusin/focusout，动态加 class，再用.label--focused控制颜色
真正容易被忽略的是 :has() 的“关系可见性”——它只认 DOM 树上的真实父子/兄弟/后代关系，不认 aria-labelledby 或 CSS display: contents 后的视觉流。结构松散或用了 Shadow DOM 的场景，:has() 会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
