具有類A和類B的元素的CSS樣式

Question

我需要樣式具有類「a」和類「b」的元素。我該怎麼做？

這些類出現在html中的順序可能會有所不同。

<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

這是完全可能的。如果你在一個元素上指定了兩個類（沒有任何空格），這意味着它必須同時適用於規則。

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

呀，使用通用類，或者爲什麼不，JavaScript的，如果內容是動態變化的

Answer 3

類選擇可以被組合：

div.a.b { 
    color: red; 
} 

從the spec引用：

要匹配的 「類」 的值的子集，每個值都必須前面有一個「。」。

p.marine.pastoral { color: green } 

此規則相匹配時：

例如，下面的規則的任何P元素，其「class」屬性已經被分配了包括「田園」和「海洋」空格分隔的值的列表相匹配class="pastoral blue aqua marine"，但不匹配class="pastoral blue"。

Answer 4

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

Answer 5

/*選擇DIV標籤有A類和B一起*/

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