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，其中包含{{1} }}

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

3 个答案: