:has 伪类选择器

:has() 是 CSS 的 父选择器，能够让父元素根据子元素的状态（如 hover）来改变自身样式。

---

基本用法

.parent:has(.child:hover) {
  background-color: gold; /* 父元素的背景变为金色 */
}

• .parent：父元素类名；
• .child：子元素类名；
• 当 .child 被 hover 时，.parent 会变为金色。

特点

• CSS 父选择器：这是一个让父元素根据子元素状态变化的原生方法。
• 简洁：相比 JavaScript，纯 CSS 代码实现，易于理解和维护。
• 链式选择：不仅支持 hover，还可以配合其他状态（如 :focus、:checked 等）。

支持情况

• Chrome：从 105 版本开始支持；
• Safari：从 15.4 版本开始支持；
• Edge：从 105 版本开始支持；
• Firefox：暂时不支持，计划未来支持。

优点

• 简洁：用 CSS 解决问题，无需 JavaScript。
• 性能：CSS 性能优于 JavaScript，且无需额外的事件监听。
• 语义清晰：代码更简洁、直观，易于理解。

限制

• 浏览器兼容性：仅支持较新的浏览器（如 Chrome 105+，Safari 15.4+）。
• 功能较新：一些旧版本浏览器（如 Firefox）可能还不完全支持，需要检查兼容性。

实际应用

• 示例：父元素背景变化

  .parent:has(.child:hover) {
    background-color: gold;
  }

• 示例：父元素大小变化

  .parent:has(.child:focus) {
    width: 100%;
    height: 200px;
  }

• 多重选择器

  .parent:has(.child:hover, .child:focus) {
    border: 2px solid #ff0000;
  }

总结

:has() 使得 CSS 在处理父子元素状态联动时，变得更强大、灵活。它简化了许多复杂的场景，特别是在不想使用 JavaScript 的情况下。只是需要注意的是，目前其支持的浏览器较新，所以在使用时需要确认兼容性。