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 。