具有类.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

类选择器可以组合:

div.a.b {
  color: red;
}

引用规范:

要匹配"类"值的子集,每个值必须以"."开头.

例如,以下规则匹配任何P元素,其"class"属性已分配了包含"pastoral"和"marine"的空格分隔值列表:

p.marine.pastoral { color: green }

此规则匹配时间class="pastoral blue aqua marine"但不匹配class="pastoral blue".

Answer 3

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