CSS :has() 父选择器

CSS :has()伪类（父选择器/反向选择）：选择包含特定子元素的父元素、组合选择器用法（:has(> img)、:has(+ p)）、表单状态联动、布局调整、浏览器兼容性 · 难度：高级 · +20XP

CSS :has() —— 父选择器终于来了

CSS一直缺少"父选择器"——根据子元素来给父元素添加样式的能力。:has()伪类填补了这个巨大的空白，让CSS又强大了很多。

基础用法

/* 包含图片的卡片加边框 */
.card:has(img) { border: 2px solid #eee; }
/* 包含验证错误输入框的表单项变红 */
.form-group:has(input:invalid) { border-color: red; }
/* 鼠标悬浮在卡片任意位置，整张卡片变色 */
.card:has(:hover) { background: #f0f0f0; }
/* 有子菜单的导航项加箭头指示 */
.nav-item:has(.submenu)::after { content: " ▾"; }

更多实用场景

/* 前一个兄弟元素样式（相邻兄弟选择器做不到的！）*/
label:has(+ input:checked) { font-weight: bold; }

/* 搜索区域在聚焦时扩大 */
.search-area:has(input:focus) { box-shadow: 0 0 20px rgba(0,0,0,0.2); }

动手练习

1. 基础练习：做一个新闻列表——有封面图的新闻项加左边框，无图的用默认样式。
2. 进阶应用：用:has(:checked)做一个纯CSS的Tab切换组件——选中哪个标签页，对应内容显示。
3. 项目实战：在表单中用:has(input:invalid)高亮显示有验证错误的字段，用:has(input:valid)给通过验证的字段加绿色对勾。