Styl CSS dla elementu o klasie A i klasie B

Question

Potrzebuję stylu elementu, który ma zarówno klasę "a", jak i klasę "b". Jak mam to zrobić?

Kolejność klas wyświetlanych w html może być różna.

<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

To całkiem możliwe. Jeśli określisz dwie klasy na elemencie (bez spacji), oznacza to, że oba muszą mieć zastosowanie dla reguły.

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

Tak, używać wspólnego klasę, lub dlaczego nie, JavaScript czy zmiany treści dynamicznie

Answer 3

selektory klasy można łączyć:

div.a.b { 
    color: red; 
} 

Cytowanie z the spec:

Aby dopasować podzbiór wartości "klasa" każda wartość może być poprzedzona przez ".".

Na przykład następująca reguła pasuje do każdego elementu P, którego atrybut „class” został przydzielony listę wartości oddzielonych spacjami, które obejmuje „duszpasterską” oraz „marine”:

p.marine.pastoral { color: green } 

Ta reguła pasuje kiedy class="pastoral blue aqua marine", ale nie pasuje do class="pastoral blue".

Answer 4

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

Answer 5

/* wybierz div tag posiadające klasy A i B razem */

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