现代css中可以使用 :has() 伪类完美替代传统父选择器js脚本，通过直接选择包含特定子元素的父级来实现条件样式。只需将目标父元素与 :has(子选择器) 结合，即可在纯css环境下完成原本需要javascript遍历dom并添加类名的操作，从而提升性能并简化代码逻辑。
:has() 如何选中包含特定子元素的父级
使用 :has() 的核心在于将其作为父选择器附加在目标元素之后，括号内填写需要匹配的子元素或结构。例如，要选中包含 .active 类的 div，写法为 div:has(.active)。这能直接定位到拥有该子结构的父节点，无需依赖层级关系如 child-of 或 sibling-of，而是基于内容存在性进行判断。浏览器会检查父元素内部是否存在符合括号内条件的节点，若存在则应用样式。
<style>
/* 选中包含 .highlight 的 article */
article:has(.highlight) {
border: 2px solid blue;
}
/* 选中包含 input:checked 的 label */
label:has(input:checked) {
font-weight: bold;
}
</style><article><p>普通段落</p>
</article><article><p class="highlight">高亮段落</p>
</article>
上述代码展示了两个典型场景。第一个场景中，只有包含 .highlight 的 article 会获得蓝色边框。第二个场景中，当 label 内部的 input 被选中时，该 label 字体加粗。这种选择方式完全由CSS引擎处理，避免了JS的运行时开销。
如何处理嵌套结构与复杂条件
在处理多层嵌套或复杂条件时，:has() 支持链式调用和组合选择器。可以结合 and、or（逗号）以及相对位置伪类来精确控制匹配范围。例如，选中同时包含 img 和 figcaption 的 p 的 。这种灵活性使得CSS能够应对原本需要JS逻辑判断的UI状态切换。
<style>
/* 选中既包含 img 又包含 figcaption 的 figure */
figure:has(img):has(figcaption) {
background: #f0f0f0;
}
/* 选中后面紧跟 p 的 h2 */
h2:has(+ p) {
color: red;
}
/* 选中包含 disabled 状态的 button 的 form */
form:has(button:disabled) {
opacity: 0.5;
}
</style><figure>
@@##@@
<figcaption>图片说明</figcaption></figure><h2>标题</h2>
<p>正文内容</p>
这段代码演示了更复杂的匹配逻辑。第一个规则利用双重 :has() 确保 figure 同时拥有图片和说明文字。第二个规则利用相邻兄弟选择器 + 配合 :has() 实现基于后续内容的样式调整。第三个规则则展示了表单状态的控制，当表单内存在禁用按钮时，整个表单变灰。这些案例证明了 :has() 在处理动态结构和状态时的强大能力。
基于 form:has(button:disabled) 的具体行为验证
针对 form:has(button:disabled) 这一具体用法，其实际行为是当 form 元素内部任意位置的 button 具有 disabled 属性时，整个 form 应用指定样式。这不同于仅对按钮本身设置样式，而是影响了父级容器。在实际开发中，这常用于实现表单整体的视觉反馈，如禁用状态下的透明度变化。需要注意的是，:has() 的选择范围仅限于当前文档树内的后代元素，不会跨Shadow DOM边界匹配，除非明确配置。此外，由于它是基于内容的选择器，性能上优于传统的JS轮询方案，但在极大量DOM节点下仍需注意查询效率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
