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

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

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

但这似乎否定了nav-block-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>

#导航分区：非（.nav-block-2）{
显示：无；
}
第一组
第2组
这是报价

也许不是你想要的，但我会这么做

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

编辑： 正如你问题中的评论所说，我认为很难做到a：如果文本周围没有标记，就不可能做到。

使用以下方法：

#导航>*：非（.nav-block-2）{
显示：无；
}

---

但是，不能隐藏单个文本节点。您需要将“这是报价”放在段落中或至少放在

标记中以隐藏它，或者您需要隐藏整个

#navigation

，它不可避免地包含

。nav-block-2

#navigation:not（.nav-block-2）将选择具有

id=navigation

和

类的元素=导航块-2

。你需要在两者之间留一个空格来表示孩子。感谢你指出，它本来是想这样做的，但这仍然不能解决我的问题。嘿，伙计，请给wrap

这是任何HTML标记中的offer

，如

这是据我所知的offerAs，
display:none在所有子节点上都是继承的，覆盖子节点中的显示将不会有任何效果。@SrikanthRayabhagi经过实验后，我认为您无法在CSS中单独完成您想要的操作。”。您似乎无法在否定中不选择子项。这将使锚点与文本一起内联。要测试
#navigation*{display:none；}
本身，会留下文本。
#navigation * {
    display:none;
}
#navigation a {
    display:inline;
}