CSS 如何实现 :has() 父选择器？

Question

仓乃文 · Accepted Answer

:has() 是 CSS 的父选择器，可以根据子元素状态来设置父元素样式，解决了长期以来 CSS 无法向上选择的痛点。

```css
/* 包含图片的卡片加边框 */
.card:has(img) {
  border: 1px solid #e0e0e0;
}

/* 包含高亮子元素的容器加金色边框 */
.container:has(.highlight) {
  border: 2px solid gold;
}

/* 表单包含无效输入时显示警告 */
.form-group:has(input:invalid) {
  border-left: 3px solid red;
}

/* 相邻元素组合：h2 后面紧跟 p 时调整间距 */
h2:has(+ p) {
  margin-bottom: 0;
}
```

补充说明：
- :has() 可以选择包含特定子元素的父元素，实现向上选择
- 支持复杂选择器组合：:has(img, video)、:has(+ p) 等
- Chrome 105+、Safari 15.4+、Firefox 121+ 支持
- 可以替代很多之前必须用 JS 实现的场景