父选择器（:has() Selector）是什么：效果预览与 AI 设计提示词

效果预览

勾选后父容器整体变色

适合用在哪

表单字段有值时整行高亮、卡片里图片加载失败时改变布局、导航里有当前项时高亮父级。

容易踩的坑

在 body 上用 :has() 切换全局状态，任何 DOM 变化都会触发整页重算。
不做 @supports 兜底，旧版浏览器整条规则失效，关键样式缺失。
用 :has() 取代本该由 JS 维护的状态，读屏需要的 aria 属性没有同步更新。

设计提示词 · Prompt

父选择器（:has()）：语法是「父元素:has(子元素)」。典型用法 —— 表单行高亮：.field:has(input:not(:placeholder-shown)){border-color:主色}；表单校验：.field:has(input:invalid:not(:placeholder-shown)){border-color:红}；卡片状态：.card:has(.badge){padding-top:某值}；数量感知布局：.grid:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}。性能上 :has() 比普通选择器略贵，避免在超长列表里做复杂 :has 组合。注意不能嵌套 :has()（:has(:has(...)) 无效）。

:has() Selector: the syntax is "parent:has(child)". Typical uses — form row highlighting: .field:has(input:not(:placeholder-shown)){border-color:primary}; form validation: .field:has(input:invalid:not(:placeholder-shown)){border-color:red}; card state: .card:has(.badge){padding-top:some value}; quantity-aware layout: .grid:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}. Performance-wise, :has() is slightly more expensive than ordinary selectors, so avoid complex :has combinations in very long lists. Note that :has() can't be nested (:has(:has(...)) is invalid).

常见搭配

同一页面里经常和「父选择器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

内联校验状态Input Validation States 浮动标签输入Floating Label Input 子网格Subgrid 容器查询Container Queries

演示 HTML 结构

<div class="s" style="width:100%">
  <div class="mc-has">
    <div class="mc-has__hd"><span class="mc-has__cb is-on"></span><b>勾选后父容器整体变色</b></div>
    <div class="mc-has__l"></div>
    <div class="mc-has__l mc-has__l--s"></div>
  </div>
</div>