为何CSS选择器.card > .card-header ~ *:not(.card-body)不生效？求纯CSS方案

首先咱们拆解下你写的选择器.card > .card-header ~ *:not(.card-body)的核心问题：

• 选择目标完全错误：这个选择器选中的是.card-header之后的所有非.card-body的兄弟元素，而不是你真正要修改的.card-header本身。哪怕它能匹配到元素，也不会对目标元素的margin-bottom产生任何影响。
• CSS的固有局限性：CSS的兄弟选择器（~）是正向解析的——只能选择当前元素之后的兄弟，没法反过来实现“如果后面没有某个元素，就选中前面的元素”这种反向逻辑。换句话说，原生CSS没有直接的方式判断“某个元素的后面不存在指定兄弟”，再反向选中前面的元素。

正确的解决方案 #

方案1：使用:has()伪类（现代浏览器首选） #

:has()是CSS的“父选择器”，它能让你基于子元素的存在状态来选择父元素。咱们可以用它精准判断.card里是否包含.card-body，然后给没有.card-body的.card内的.card-header移除margin-bottom：

/* 先给所有.card-header设置默认的margin-bottom */
.card .card-header {
  margin-bottom: 1rem; /* 替换成你实际使用的默认值 */
}

/* 当.card里没有.card-body时，移除.card-header的margin-bottom */
.card:not(:has(.card-body)) .card-header {
  margin-bottom: 0;
}

这个方案简洁直观，目前Chrome、Firefox、Safari等主流现代浏览器都已支持:has()，如果你的项目不需要兼容IE，这是最优解。

方案2：添加额外类名（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，最稳妥的方式是在HTML层面给没有.card-body的.card加一个额外类名，比如.card-no-body：

<!-- 没有card-body的card，添加专属类 -->
<div class="card card-default card-no-body">
  <div class="card-header">Card Title</div>
</div>

<!-- 有card-body的card，保持原有结构 -->
<div class="card card-default">
  <div class="card-body">...</div>
</div>

然后用CSS直接选中这个类下的.card-header：

.card-no-body .card-header {
  margin-bottom: 0;
}

这种方式兼容性拉满，没有任何浏览器限制，唯一的小缺点是需要调整HTML结构。

总结来说，你原来的选择器既选错了目标元素，又忽略了CSS选择器的正向解析逻辑。用上面两种方案就能轻松实现你的需求啦！

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