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

引自the spec：

要匹配“class”值的子集，每个值必须以“。”开头。

例如，以下规则匹配任何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;
}

Answer 4

/ *选择包含a和b类的div标签* /

 <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

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

5 个答案: