如何仅用纯CSS根据相邻容器内容条件隐藏HTML元素？

你的需求是：当.text容器内不存在.classC元素时，隐藏.role-title里的<p class="classC">Role C</p>元素。先看你原来代码的两个问题：

• HTML结构里.role-title在.text之前，你用的+相邻兄弟选择器只能选中当前元素后面的兄弟，所以原选择器方向完全反了
• 原规则是隐藏整个.role-title，而不是目标的.classC元素

正确的CSS实现方案 #

利用CSS的:has()选择器（目前主流浏览器均支持），可以精准定位目标元素：

<html>
<head>
    <style>
        /* 当.role下的.text没有.classC时，隐藏.role-title里的.classC */
        .role:has(.text:not(:has(.classC))) .role-title .classC {
            display: none;
        }
        body {
            color: black;
        }
    </style>
</head>
<body>
    <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>
            <!-- 取消下面注释，Role C会重新显示 -->
            <!-- <p class="classC">content for Role C</p> -->
        </div>
    </div>
</body>
</html>

选择器解释 #

• .role:has(.text:not(:has(.classC)))：筛选出包含“内部没有.classC元素的.text容器”的.role父元素
• .role-title .classC：在上述筛选出的.role元素内，定位到.role-title下的.classC元素，设置display: none隐藏它

这样就能完全满足你的需求：仅通过纯CSS，根据.text容器的内容动态控制.role-title内特定元素的显示状态。

内容的提问来源于stack exchange，提问作者Wael