CSS Negate: Wyświetlanie określonych elementów w ukrytym elemencie?

Question

Załóżmy, że mamy element, który jest podobny do tego

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

teraz chcę, aby ukryć wszystkie elementy, w tym textelements ale nie nav-block-2, więc czy jest jakiś sposób, przez które można to zrobić? Coś jak użycie negacji CSS?

Próbowałem za pomocą

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

ale to wydaje się negując nawet elementów wewnątrz nav-blok-2? Czy robię coś złego tutaj? Jakieś pomysły?

Answer 1

Spróbuj

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

Może nie to, co chcesz, ale tutaj jest to, co chciałbym robić.

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

EDIT: Jak mówi się w komentarzach w swoje pytanie, myślę, że jest to trudne do zrobienia: nie, gdy nie ma tag wokół tekstu.

Answer 3

Użyj tego:

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

Jednakże, nie można ukryć pojedyncze węzły tekstowe. Będziesz musiał umieścić "To jest oferta" w akapicie lub przynajmniej w tagu <span>, aby to ukryć, lub musisz ukryć cały #navigation, który nieuchronnie zawiera .nav-block-2.