基本形态：.card:has(img) 选中「含有 img 的 .card」；input:has(+ .error) 选中「后面跟着错误提示的输入框」；:not(:has(p)) 选中「没有 p 的元素」。它把以前必须靠 JS 的「看内容选容器」逻辑拉回了 CSS。
2023 年下半年起全主流浏览器支持。典型场景：表单出错时整行变红（:has(.err)）、目录里有视频条目加个图标、手风琴展开时父容器换边框。选择器本身性能注意：别在巨大列表里嵌套过深。
<style> .field { border: 1px solid #30363d; border-radius: 8px; padding: 10px; margin: 6px 0; } .field:has(.err) { border-color: #f85149; background: #f8514912; } .field:has(input:placeholder-shown) .ok { opacity: .3; } </style> <div class="field"><input placeholder="用户名"><span class="ok">✓ 校验通过</span></div> <div class="field"><input placeholder="邮箱" value="bad"><span class="err">邮箱格式错误</span></div> <!-- 整行变红 -->