Stile CSS per un elemento che ha classe A e classe B

Question

Ho bisogno di creare uno stile con classe "a" e classe "b". Come lo faccio?

L'ordine di visualizzazione delle classi in html può variare.

<style> 
div.a ? div.b{ 
color:#f00; 
} 
</style> 
<div class="a">text not red</div> 
<div class="b">text not red</div> 
<div class="a b">red text</div> 
<div class="b a">red text</div> 

Answer 1

Questo è tutto possibile. Se si specificano due classi su un elemento (senza spazi), ciò significa che deve avere entrambe le regole per l'applicazione.

div.a { 
 
    color: blue; 
 
} 
 
div.b { 
 
    color: green; 
 
} 
 
div.a.b { 
 
    color: red; 
 
}

<div class="a"> 
 
    A 
 
</div> 
 
<div class="b"> 
 
    B 
 
</div> 
 
<div class="a b"> 
 
    AB 
 
</div>

Answer 2

Sì, utilizzare una classe comune, o perché no, JavaScript se il contenuto cambia in modo dinamico

Answer 3

selettori di classe possono essere combinati:

div.a.b { 
    color: red; 
} 

Citando the spec:

per abbinare un sottoinsieme di valori "class", ogni valore deve essere preceduto da un ".".

Ad esempio, la seguente regola seleziona ogni elemento P il cui attributo "class" è stato assegnato un elenco di valori separati da spazio che comprende "pastoral" e "marine":

p.marine.pastoral { color: green } 

Questa regola corrisponde quando class="pastoral blue aqua marine" ma non corrisponde per class="pastoral blue".

Answer 4

div[class~="a"][class~="b"]{ 
color:#f00; 
} 

Answer 5

/* selezionare tag div con Classe A e B insieme */

<style> 
    div.a.b 
    { 
     color:#f00; 
    } 
    </style> 
    <div class="a">text not red</div> 
    <div class="b">text not red</div> 
    <div class="a b">red text</div> 
    <div class="b a">red text</div>