检查元素是否存在，然后应用CSS

Question

我的 HTML 代码基本上是

<div class="a">
  <div class="b">
    ...
  </div>
</div>
<div class="c">
  ...
</div>

我现在想应用于display: none;c，但前提是 b 存在。a 和 c 始终存在。

我的方法是

.a .b ~ .c {
  display: none;
}

Answer 1

编辑：现在可以纯粹通过 CSS 来实现（例外的是 Firefox 仍需要:has在 2023 年 4 月集成选择器）：

 .a:has(.b) ~ .c {
     display: none;
 }

旧答案

这应该适合你：

var b = document.querySelector('.b');

if (b) {
  document.querySelector('.c').style.display = 'none';
}

<div class="a">a
  <div class="b">b</div>
</div>

<div class="c">c</div>

显然，JavaScript 是必需的，但只需轻轻一点即可。您可以将 添加document.querySelector('.b)到语句中if，而不是将其保存到变量中。

编辑：稍微澄清一下您的代码有什么问题 - 您首先选择.a .b哪个将选择该类b（如果它是该类的后代a），然后您使用通用兄弟组合器（后续兄弟组合器），但它不会选择c班级。这是因为该类c位于a元素之外，因此不是您的a类的后代。纯 CSS 解决方案是将您的c类放在您的元素中a，这将使您当前的 CSS 工作并且不需要 JavaScript。例如，您的 HTML 将如下所示：

.a .b ~ .c {
   display: none;
}

<div class="a">a
    <div class="b">b</div>
    <div class="c">c</div>
</div>

顺便说一句，一般的兄弟组合 ~运算符将查找b类后面的任何后续元素c。c如果您只想将其应用于之后的第一个元素b，请考虑使用相邻同级选择器 +，也称为“下一个同级组合器”。