überschreiben die CSS-Eigenschaft

Question

Ich habe 2 Eltern Div Ansicht 1 und 2. und möchte die zweite Ansicht ausblenden, aber Anzeige der zweiten Ansicht anzeigen.

gewünschte Ausgabe ist: Titel
Probe description1
Probe description2

.view2{ 
 
    display:none; 
 
} 
 
.view2 .desc{ 
 
    display:block !important; 
 
}

<div class="view1"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description1</div> 
 
</div> 
 
<div class="view2"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description2</div> 
 
</div>

Answer 1

Verwenden :not() Selektor.

Versuchen Sie, diese

.view2 *:not(.desc) { 
 
    display: none; 
 
}

<div class="view1"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description1</div> 
 
</div> 
 
<div class="view2"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description2</div> 
 
</div>

Answer 2

Ich habe die privelage nicht zu kommentieren, aber Sie können Java-Skript für diese Verwendung ausstoßen.

element.style.visibility = "hidden"; 

Answer 3

aktualisieren Css

.view2 .title{ 
    display:none; 
} 

Snippet Beispiel Below

.view2 .title{ 
 
    display:none; 
 
}

<div class="view1"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description1</div> 
 
</div> 
 
<div class="view2"> 
 
    <div class="title"> 
 
    <p>Hello</p> 
 
    </div> 
 
    <div class="desc"> sample description2</div> 
 
</div>