告别 JS 状态监听：使用 CSS :has() 选择器实现智能组件布局

写过主题或插件前端的人，大概都踩过这类坑：表单校验失败要给整块区域加红框，卡片有没有封面图要切换两套布局。于是你写上 classList.add、挂 MutationObserver，或者在组件状态里多塞一个布尔值，只为了让父级知道子级发生了什么。CSS 选择器长期只能“往下选”，父级样式往往不得不依赖 JavaScript。

:has() 把这件事反过来了：只要子元素满足某个条件，父元素就能直接吃到样式。语法本身很直白——父选择器:has(子条件)——但它真正省下的，是一整套“监听状态 → 改 class → 再触发重绘”的链路。下面用两个 WordPress 主题和插件里都常见的场景，把传统 JS 写法与纯 CSS 方案放在一起对比。

场景一：表单校验失败时，高亮整个字段容器

评论表单、联系表单、自定义字段区块，校验失败时通常不只改 input 边框，还要给外层 .field 加背景、图标或提示色。传统做法往往是这样：

const field = input.closest('.field');
input.addEventListener('invalid', () => {
  field.classList.add('is-invalid');
});
input.addEventListener('input', () => {
  if (input.validity.valid) {
    field.classList.remove('is-invalid');
  }
});

.field.is-invalid {
  border-color: #e11d48;
  background: #fff1f2;
}
.field.is-invalid .hint {
  display: block;
}

逻辑并不复杂，但每个输入都要绑事件；若还有动态插入的字段（比如重复器、AJAX 换页表单），还得考虑事件委托或重新初始化。用 :has() 后，DOM 结构可以保持干净，样式完全跟着子元素状态走：

.field:has(input:invalid),
.field:has(textarea:invalid),
.field:has(.error-message) {
  border-color: #e11d48;
  background: #fff1f2;
}

.field:has(input:invalid) .hint,
.field:has(.error-message) .hint {
  display: block;
  color: #be123c;
}

当浏览器原生校验把 input 标成 :invalid，或后端返回错误后你在字段里插入 .error-message，父级 .field 会立刻匹配，无需再维护 is-invalid class。对主题开发者来说，这意味着少写一段初始化脚本，也少一个容易和缓存、区块编辑器预览不同步的状态源。

如果你希望错误态只在用户真正交互后才出现，可以继续组合 :user-invalid（在支持的浏览器中），而不是自己记 touched 标志：

.field:has(input:user-invalid) {
  outline: 2px solid #e11d48;
}

父级样式跟着“子级是否已处于用户触发的无效态”自动切换，组件状态机可以再瘦一圈。

场景二：有没有封面图，决定卡片布局

文章卡片、产品卡、作品集块里，有封面图时通常是“图左文右”或“上图下文”，没有封面时则希望标题和摘要垂直居中、占满整卡。过去常见写法是渲染阶段算好 class，或在前端再扫一遍 DOM：

document.querySelectorAll('.card').forEach((card) => {
  if (card.querySelector('.card-cover')) {
    card.classList.add('has-cover');
  } else {
    card.classList.add('no-cover');
  }
});

.card.has-cover {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
}
.card.no-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
}
.card.no-cover .card-cover {
  display: none;
}

服务端模板其实已经知道有没有图，但一旦内容来自区块编辑器、Infinite Scroll、或 REST 二次渲染，你又得在客户端补一遍。:has() 可以直接读 DOM 结构：

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

/* 存在封面图：切换为双栏 */
.card:has(> .card-cover) {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 1rem;
}

.card:has(> .card-cover) .card-cover {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

/* 没有封面：正文区域拉高，视觉更均衡 */
.card:not(:has(> .card-cover)) {
  justify-content: center;
  min-height: 180px;
}

.card:not(:has(> .card-cover)) .card-body {
  text-align: center;
}

对应 HTML 可以保持极简：

<article class="card">
  <img class="card-cover" src="cover.jpg" alt="">
  <div class="card-body">
    <h3>文章标题</h3>
    <p>摘要文字……</p>
  </div>
</article>

<article class="card">
  <div class="card-body">
    <h3>无封面的文章</h3>
    <p>摘要文字……</p>
  </div>
</article>

有 .card-cover 就走网格，没有就走居中 flex。列表里混排两种卡片时，不需要 PHP 分支再吐 has-cover / no-cover，也不需要 JS 二次标注。主题里做“相关文章”“最新动态”这类模块时，这类写法特别省事。

为什么这能明显减少 DOM 操作

两个例子里，JS 方案的共同点是：先观察子树变化，再把结论写回父节点 class，最后靠 class 驱动 CSS。:has() 把“结论”留在选择器里——浏览器在样式计算阶段完成匹配，你的脚本不必再当传话人。

对 WordPress 前端尤其有用的几点：

• 状态源更少。校验 class、布局 class 不再需要和 React/Vue 组件 state、或 jQuery 事件回调保持同步。
• 动态内容更稳。区块前端渲染、无限加载、筛选结果替换后，只要 HTML 结构正确，样式自动跟上。
• 关注点归位。表现层规则写在 CSS，行为层脚本只处理真正的交互与数据请求。

它也不只是“父选择器”。兄弟关系、后代条件都能写进参数，例如 label:has(+ input:focus) 高亮相邻标签，或 nav:has(a[aria-current="page"]) 给含当前页链接的导航加强调。核心思路都是：用结构条件描述样式，而不是用脚本搬运状态。

兼容性与优雅降级

:has() 已在主流浏览器中落地。按当前整体使用面估算，全球大约有 88%–90% 的浏览器环境可以使用；Chrome 自 105 起支持，Safari 更早跟进，随后 Firefox 等也完成了支持。MDN 将其标为基线广泛可用特性，Can I use 与 Web features explorer 也能查到更细的版本矩阵。

对主题和插件来说，不建议“全站押宝后完全不做兜底”，但也不必退回全量 JS 监听。更稳妥的是渐进增强：

/* 基础布局：所有浏览器都能看 */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 增强布局：仅在支持 :has() 时启用 */
@supports selector(:has(*)) {
  .card:has(> .card-cover) {
    display: grid;
    grid-template-columns: 160px 1fr;
  }

  .field:has(input:invalid) {
    border-color: #e11d48;
    background: #fff1f2;
  }
}

不支持的环境会停在可读的基础样式；支持的环境自动获得智能布局。若某块业务对旧浏览器占比极敏感（例如后台管理页仍要照顾很老的内嵌浏览器），可以只在关键路径保留极薄的 class 回退，而不是把所有 UI 状态都交回 JS。

:has() 的价值，不在于多记一条伪类语法，而在于让你重新划分 CSS 与 JS 的边界。下次再写“子元素变了，父容器要换皮”的需求，先问一句：这件事能不能用结构条件直接表达？能的话，少挂一个监听，页面会更轻，主题代码也会更干净。