CSS如何使颜色:橙色，当一个DOM同时有.red和.yellow？

Question

例如，我有一个div，如：

<div class="red yellow"><div>

我的css：

.red{background-color:red;}
.yellow{background-color:yellow;}

当我的div同时拥有.red和.yellow类时，如何使它的背景色变成橙色呢？我认为类似的方式是：

.red .yellow{background-color:orange;}

我知道这不是正确的方法，但是我如何归档我的需求呢？

Answer 1

试试这边。两个类名之间不应该有空格。

.red.yellow { background-color:orange; }

看这个片段。

​

.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow { background-color:orange; }

<div class="red">Red</div>
<div class="yellow">Yellow</div>
<div class="red yellow">Orange</div>

​

Answer 2

HTML

<div class="red yellow"><div>

CSS

div{height:100px;} /* I added dummy height for div just to show output */

.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow{background-color:orange;}

输出

​

​