如何将CSS应用于具有多个类的元素？

Question

有没有办法将样式应用于包含多个类的元素？

实施例

---

<div class="foo"     > foo     </div>
<div class="foo bar" > foo bar </div>
<div class="bar"     > bar     </div>

---

我只想修改包含类“foo bar”的元素的样式。 XPath信息类似于//div[contains(@class,"foo") and contains(@class,"bar")]。纯CSS的任何想法，不必创建一个独特的类？

Answer 1

像这样：

.foo { background: red; }
.bar { background: blue; }
.foo.bar { background: purple; }

Answer 2

解决方案

---

1. .foo.bar { ... }
   

2. [class="foo bar"] { ... }             // explicit class name
   

3. [class~="foo"][class~="bar"] { ... }  // inclusive class name