CSS :has() 选择器实战：父选择器改变组件样式架构

:has() 选择器：CSS 的"父选择器"

长期以来，CSS 只能从父到子选择元素。:has() 打破了这个限制，实现了从子到父的反向选择：

/* 传统：只能选子元素 */
.card .title { color: blue; }

/* :has()：根据子元素状态选父元素 */
.card:has(.title) { border-color: blue; }

浏览器支持

浏览器	支持版本	发布时间
Chrome	105+	2022.08
Safari	15.4+	2022.03
Firefox	121+	2023.12
Edge	105+	2022.08

截至 2026 年，所有主流浏览器均已支持 :has()。

---

语法与匹配逻辑

基本语法

/* 包含指定后代 */
parent:has(descendant) { }

/* 包含直接子元素 */
parent:has(> child) { }

/* 兄弟元素存在 */
element:has(+ sibling) { }
element:has(~ sibling) { }

/* 多条件组合 */
element:has(.a, .b) { }    /* 或 */
element:has(.a):has(.b) { } /* 且 */

与 :not() 组合

/* 不包含 .active 子元素的 .nav */
.nav:not(:has(.active)) {
  opacity: 0.5;
}

/* 包含未选中的 checkbox */
.form:has(input:not(:checked)) {
  border-color: orange;
}

---

实战案例 1：表单验证状态

传统 JS 方案

// 需要监听每个输入框的验证状态
input.addEventListener('invalid', () => {
  form.classList.add('has-error');
});
input.addEventListener('valid', () => {
  form.classList.remove('has-error');
});

:has() 方案

/* 表单包含无效输入时，整体样式变化 */
form:has(:user-invalid) {
  border-color: #ef4444;
}

form:has(:user-invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* 单个字段无效时，其容器高亮 */
.field:has(:user-invalid) {
  background: #fef2f2;
}

.field:has(:user-invalid) .error-msg {
  display: block;
}

/* 全部有效时显示成功提示 */
form:has(.field:not(:has(:user-invalid))) .success-msg {
  display: block;
}

<form>
  <div class="field">
    <label>邮箱</label>
    <input type="email" required />
    <span class="error-msg">请输入有效邮箱</span>
  </div>
  <div class="field">
    <label>密码</label>
    <input type="password" required minlength="8" />
    <span class="error-msg">密码至少 8 位</span>
  </div>
  <button class="submit-btn">提交</button>
  <span class="success-msg">表单有效</span>
</form>

---

实战案例 2：卡片布局

含图片与无图片的卡片自适应

/* 有图片的卡片：水平布局 */
.card:has(img) {
  display: flex;
  gap: 1rem;
}

.card:has(img) .card-body {
  flex: 1;
}

/* 无图片的卡片：垂直布局 */
.card:not(:has(img)) {
  display: block;
  text-align: center;
}

/* 图片为横图时调整比例 */
.card:has(img[width="1200"]) {
  flex-direction: column;
}

卡片悬停效果

/* 鼠标悬停在卡片任意位置，图片缩放 */
.card:has(.card-link:hover) img {
  transform: scale(1.05);
}

.card:has(.card-link:hover) .card-title {
  color: var(--primary);
}

---

实战案例 3：导航高亮

传统方案：服务端渲染时添加 active class

<nav>
  <a href="/" class="active">首页</a>
  <a href="/blog">博客</a>
</nav>

:has() 方案：纯 CSS 感知当前页面

/* 利用 aria-current 属性 */
nav:has([aria-current="page"]) {
  border-bottom-color: var(--primary);
}

nav a:has(+ [aria-current="page"]),
nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

/* 导航中有激活项时，显示返回按钮 */
nav:not(:has([aria-current="page"])) .back-btn {
  display: none;
}

侧边栏折叠感知

/* 侧边栏有展开的子菜单时，显示分割线 */
.sidebar:has(.submenu:not([hidden])) {
  border-right: 2px solid var(--border);
}

/* 所有子菜单都折叠时，紧凑模式 */
.sidebar:not(:has(.submenu:not([hidden]))) {
  width: 64px;
}

---

实战案例 4：暗色模式联动

根据图片亮度自动调整

/* 当页面包含高亮度图片时，周围文字加深 */
figure:has(img.light) {
  background: #1a1a1a;
  color: #fff;
}

/* 暗色模式下，包含透明图片的容器加背景 */
@media (prefers-color-scheme: dark) {
  .container:has(img[alt*="logo"]) {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
  }
}

---

实战案例 5：表格与列表交互

表格全选感知

/* 所有 checkbox 都选中时，表头样式变化 */
table:has(tbody input:checked:not(:indeterminate):not(:only-child))
  th {
  background: var(--primary-light);
}

/* 有部分选中时，显示批量操作栏 */
table:has(tbody input:checked) .batch-actions {
  display: flex;
}

/* 无选中时隐藏 */
table:not(:has(tbody input:checked)) .batch-actions {
  display: none;
}

列表空状态

/* 列表为空时显示空状态提示 */
.list:has(> :only-child.empty-placeholder) {
  justify-content: center;
  min-height: 200px;
}

---

:has() 与 JavaScript 的取舍

场景	:has() 优势	JS 优势
DOM 结构变化	自动响应，无需监听	可处理异步数据
性能	浏览器原生，样式计算快	可精细控制计算时机
复杂逻辑	简单条件判断	多步计算、API 调用
兼容性	2023 年后全支持	无兼容问题

性能注意事项

/* 差：深层嵌套的 :has() 可能影响性能 */
.container:has(.deep1:has(.deep2:has(.deep3))) { }

/* 好：扁平的 :has() 条件 */
.container:has(.deep3) { }

避免多层嵌套 :has()，浏览器需要遍历 DOM 树来匹配，嵌套越深开销越大。

---

与其他 CSS4 特性的配合

:is() 和 :where() 简化选择器

/* 使用 :is() 简化多类型判断 */
.card:has(:is(img, video, svg)) {
  aspect-ratio: 16/9;
}

/* :where() 降低优先级，方便覆盖 */
.card:where(:has(.featured)) {
  border-color: gold;
}

:modal 和 :popover

/* 页面有打开的模态框时，禁止背景滚动 */
body:has(:modal) {
  overflow: hidden;
}

body:has([popover]:not(:popover-closed)) {
  overflow: hidden;
}

---

最佳实践总结

• 优先用 :has() 替代 JS class 切换：减少 JS 代码，样式逻辑内聚
• 保持 :has() 条件扁平：避免多层嵌套影响性能
• 与语义属性配合：aria-current、:user-invalid、:checked 等
• 渐进增强：核心功能不依赖 :has()，:has() 作为增强
• 配合 DevTools 调试：Chrome DevTools 已支持 :has() 选择器高亮

---

总结

:has() 选择器是 CSS 发展史上最重要的能力扩展之一，它让 CSS 具备了从子到父的反向选择能力，大幅减少了表单验证、条件样式、状态联动等场景的 JavaScript 代码。掌握 :has() 的匹配逻辑和性能边界，是现代前端工程师的必备技能。

使用 Flexbox 工具 练习布局组合，使用 Box Shadow 生成器 创建卡片阴影效果，使用 Border Radius 工具 设计卡片圆角。