css - 具有类 .a 和类 .b 的元素的 CSS 选择器

Question

我需要设计一个同时具有 class.a和 class的元素.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 元素，其“类”属性已被分配一个空格分隔的值列表，其中包括“田园”和“海洋”：

p.marine.pastoral { color: green }

此规则匹配 whenclass="pastoral blue aqua marine"但不匹配 for class="pastoral blue"。

Answer 3

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

Answer 4

/* select div tag having class a and b together */
<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>

Answer 5

是的，如果内容动态变化，请使用通用类，或者为什么不使用 JavaScript