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

这应该适合你：

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>

在旁注中，general sibling combinator ~ 运算符将查找 b 之后的任何后续元素，其类别为 c。如果您只想将其应用于 c 之后的类为 b 的第一个元素，请考虑使用 adjacent sibling selector +，也称为“next-”兄弟组合器'代替。

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

1 个答案: