Question

我不确定这是否可以完全用CSS（命令式）完成，但目前正在中途工作。我有这个当前的HTML设置：

<div class="content">
    <div>
        <div class="image"></div>
    </div>
    <div class="text"></div>
    <div class="text"></div>
    <div>
        <div class="button"></div>
    </div>
    <div>
        <div class="image"></div>
    </div>
</div>

我当前的CSS隐藏了没有类的“.content”的所有子元素。

.content > *:not([class]):first-child {
  display:block;
}

在“.content”的剩余3个可见类子元素中，除了具有带有“.image”类的孙元素的第一个子元素外，我需要隐藏它们。这是我的CSS，但它不起作用：

.content > *:not([class]):not(.image):first-child {
    display:block;
}

Answer 1

这对CSS来说是不可能的。您尝试不按子项的属性显示父元素。 CSS因此不起作用。但你可以为此小js：

document.querySelector(".image").parentNode.style.display = "block";

.content>div {
  display: none;
}

<div class="content">
  <div>
    <div class="image">1</div>
  </div>
  <div class="text">2</div>
  <div class="text">3</div>
  <div>
    <div class="button">4</div>
  </div>
  <div>
    <div class="image">5</div>
  </div>
</div>

Answer 2

安德烈的答案很好，但是如果你不想使用JS我认为你需要在中间孩子上有一个类，因为你想要的元素的整个树必须是可见的。也就是说，如果要显示的元素的任何父元素被隐藏，那么子元素也将被隐藏。这样的事情可能会这样：

<div class="content">
    <div>
        <div class="image"></div>
    </div>
    <div class="text"></div>
    <div class="text"></div>
    <div>
        <div class="button"></div>
    </div>
    <div class="visible">
        <div class="image"></div>
    </div>
</div>

.content > * {
    display: none;
}
.content > .visible {
    display: block;
}

如何使用CSS隐藏除具有特定类的孙子之外的所有元素？

2 个答案: