CSS兄弟选择器配合:not伪类控制元素显隐失效怎么办

你写的选择器有两个硬伤：

• 类选择器语法错误：CSS里匹配类名必须在类名前加.前缀，你写的existentes:not(.d-none)是匹配名为existentes的HTML标签，根本选不到class为existentes的div。
• 兄弟选择器匹配方向错误：CSS的相邻兄弟选择器+、通用兄弟选择器~，只能选中当前元素后面的同级元素，无法选中排在它前面的元素。你的HTML里.inexistente在.existentes前面，哪怕类名写对了也匹配不到。

最稳妥、兼容性最好的方案是调整两个div的先后顺序，把.existentes放到.inexistente前面，调整后的HTML：

<div class="existentes d-none"></div>
<div class="inexistente">
  Ainda não existem documentos adicionados 
</div>

对应正确的CSS：

.existentes:not(.d-none) ~ .inexistente {
  display: none;
}

效果完全符合你的预期：当.existentes移除d-none类时，.inexistente会自动隐藏。

如果你不想调整DOM顺序，也可以用父级:has()选择器实现（注意仅现代浏览器支持），需要给两个div加个共同父容器，比如：

<div class="doc-wrap">
  <div class="inexistente">
    Ainda não existem documentos adicionados 
  </div>
  <div class="existentes d-none"></div>
</div>

对应CSS：

.doc-wrap:has(.existentes:not(.d-none)) .inexistente {
  display: none;
}

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