纯 CSS 无法可靠实现“根据另一容器中是否存在某类元素来隐藏当前元素”的条件逻辑，因为 :has() 伪类在多数实际场景中受限（如不支持跨兄弟/祖先选择），且浏览器兼容性与语义限制使其难以达成预期效果。
纯 css 无法可靠实现“根据另一容器中是否存在某类元素来隐藏当前元素”的条件逻辑，因为 `:has()` 伪类在多数实际场景中受限（如不支持跨兄弟/祖先选择），且浏览器兼容性与语义限制使其难以达成预期效果。
在您提供的示例中，目标是：当 .text 容器内不存在
时，隐藏同级 .role-title 中的
Role C
。乍看可尝试使用 :has()，例如：.role-title p.classC:not(:has(~ .text p.classC)) {
display: none;
}但这是无效的——:has() 不能用于否定选择器内部（not(:has(...)) 不被支持），且 :has() 的参数中无法向上或跨级引用祖先/兄弟元素（如 ~ .text 是无效语法）。当前标准下，:has() 仅支持向后代、子元素方向查找，且必须作为独立选择器使用（如 .role:has(.text .classC) .role-title p.classC），但该写法也无法反向控制“缺失时隐藏”。
更关键的是，即使写成：
.role:has(.text .classC) .role-title p.classC {
display: block; /* 显式显示 */
}
.role .role-title p.classC {
display: none; /* 默认隐藏 */
}这只能实现“存在时显示”，而无法真正“缺失时隐藏”——因为 CSS 没有“不存在则应用样式”的原生机制，且默认样式优先级和层叠逻辑会使该方案不可靠。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法：使用 JavaScript 补足逻辑缺口
通过脚本检测 .text 中是否包含 .classC，动态添加类控制显隐：
<div class="role">
<div class="role-title">
<p class="classA">Role A</p>
<p class="classB">Role B</p>
<p class="classC">Role C</p>
</div>
<div class="text">
<p class="classA">content for Role A</p>
<p class="classB">content for Role B</p>
</div>
</div>
<style>
.role-title p.classC.hidden {
display: none;
}
</style>
<script>
document.querySelectorAll('.role').forEach(role => {
const titleC = role.querySelector('.role-title p.classC');
const textC = role.querySelector('.text p.classC');
if (!textC && titleC) {
titleC.classList.add('hidden');
}
});
</script>? 注意事项：
- :has() 虽已在 Chrome 105+、Safari 15.4+、Firefox 121+ 支持，但不支持在 :not() 内嵌套，也不支持选择器中混用跨层级关系符（如 +、~ 在 :has() 内无效）；
- 纯 CSS 方案在可访问性、SEO 和 SSR 场景下同样不可控；
- 若项目允许，服务端渲染时直接省略对应 DOM 节点，是最健壮的“条件渲染”。
综上：CSS 擅长样式与状态响应（如 :hover, :checked），但不具备运行时存在性判断能力。涉及 DOM 结构依赖的条件逻辑，JS 是必要且推荐的解决方案。
