javascript - CSS Negate：在隐藏元素中显示特定元素？

Question

假设我们有一个与此类似的元素

<div id="navigation">
   <div class="nav-block-1">....</div>
   <div class="nav-block-2">....</div>
   This is the offer
   <a href="#"> Report </a>
</div>

现在我想隐藏所有元素，包括 textelements 但不隐藏nav-block-2，那么有没有办法可以做到这一点？像使用 CSS 否定之类的东西？

我尝试使用

#navigation :not(.nav-block-2) {
   display:none;
}

但这似乎甚至否定了 nav-block-2 中的元素？我在这里做错了吗？有任何想法吗？

Answer 1

也许不是你想要的，但这就是我要做的。

#navigation * {
    display:none;
}
#navigation a {
    display:inline;
}

编辑：正如您在问题的评论中所说，我认为很难做到 :not 当文本周围没有标签时。

Answer 2

用这个：

#navigation > *:not(.nav-block-2) {
   display:none;
}

但是，您不能隐藏单个文本节点。您需要将“这是报价”放在一个段落中或至少在一个<span>标签中以隐藏它，或者您需要隐藏#navigation不可避免包含.nav-block-2.

Answer 3

尝试这个

#navigation div:not(.nav-block-2) {
   display:none;
}


<div id="navigation">
   <div class="nav-block-1">Div 1</div>
   <div class="nav-block-2">Div 2</div>
    This is the offer
   <a href="#"> Report </a>
</div>