CSS-Anzeige keine für Klassennamen, wenn allein

Question

Ich möchte die Anzeigeoption auf keine für eine CSS-Klasse, wenn es alleine ist, aber es verbirgt auch das Element, wenn es mit einer anderen Klasse verwendet wird.

so ist hier, wie die HTML aussieht, wenn ich will die Biographie Klasse zeigen:

<div class="user biography"> 
    <p>Content</p> 
</div> 

und hier möchte ich die Biographie Klasse display:none gesetzt werden, wenn es allein (nicht mit Benutzerklasse) ist :

<div class="biography"> 
    <p>should hide</p> 
</div> 

aber wenn ich tun:

.biography{ 
    display: none; 
} 

es versteckt die Biographie Klasse in beiden Fällen. Wie kann ich es ausblenden, wenn es alleine ist und nicht mit Benutzerklasse?

Answer 1

Sie attribute selector[class='biography'] verwenden können, und dies wird alle Elemente übereinstimmen, die Klasse mit dem genauen Wert von biography

[class='biography'] { 
 
    display: none; 
 
}

<div class="user biography"> 
 
    <p>Content</p> 
 
</div> 
 
<div class="biography"> 
 
    <p>should hide</p> 
 
</div>

Answer 2

Sie benötigen :not pseudoselector verwenden:

.biography:not(.user){ 
    display: none; 
} 

Answer 3

Sie können den Attributswähler verwenden sehen, ob die Klasse übereinstimmt, dass die Namen genau

[class="biography"] { 
    display: none; 
} 

Nur Elemente mit class="biography" wird abgestimmt werden.

Answer 4

Eine Lösung wäre, eine zweite Klasse hinzuzufügen, und nur die Anzeige gilt: keine, wenn beide Klassen vorhanden sind:

<div class="user biography"> 
    <p>Content</p> 
</div> 
<div class="biography hidden"> 
    <p>should hide</p> 
</div> 
<style> 
.biography.hidden { 
    display: none; 
} 
</style> 

Answer 5

.biography { 
    display: none; 
} 

.biography.user { 
    display: block; 
} 

Answer 6

Ich glaube, Sie disply:none standardmäßig verwendet werden sollen und display:block wenn das Element innerhalb oder mit einer Klasse. So können Sie dies tun:

.user.biography { 
 
    display: block; 
 
} 
 

 
.biography { 
 
    display: none; 
 
}

<div class="user biography"> 
 
    <p>Content</p> 
 
</div> 
 

 

 

 
<div class="biography"> 
 
    <p>should hide</p> 
 
</div>