CSS否定：在隐藏元素中显示特定元素？

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;
}

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

Answer 2

试试这个

#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>

Answer 3

用这个：

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

但是，您无法隐藏单个文本节点。 您需要在段落中或至少在<span>标记中放置“This is the offer”来隐藏它，否则您需要隐藏整个#navigation ，其中包含.nav-block-2 。