如何将不同css规则中的不同颜色应用于同一对象？

Question

使用html代码：

<div class="c1">Color 1</div>
<div class="c2">Color 2</div>
<div class="c1 c2">Mix of color 1 and 2</div>

和这个css规则：

.c1 {
    background-color: rgba(255,0,0,0.5)
}
.c2 {
    background-color: rgba(0,255,0,0.5)
}

我希望第3个div为黄色。 （它是绿色的）。

我知道可以为混音定义另一条规则：

.c1.c2 {
    background-color: rgba(255,255,0,0.5)    
}

但是想象一下，我有很多颜色，或者最糟糕的颜色：许多具有不同规则的类可以混合使用。

有没有办法在纯CSS中执行此操作而无需为所有可能的组合定义规则？

Answer 1

您可以使用LESS进行色彩操作

转到http://less2css.org/

将此代码复制到输入中：

@red: rgba(255,0,0,0.5);
@green: rgba(0,255,0,0.5);
@yellow: @red + @green;
.test
{
  background-color: @yellow;
}

产生css输出：

.test {
  background-color: #ffff00;
}

<小时/> 修改

好的，在您发表评论并重新阅读问题后，我认为这就是您想要做的事情：

LESS：

@red: rgba(255,0,0,0.5);
@green: rgba(0,255,0,0.5);

.c1
{
  background-color: @red;
}
.c2
{
  background-color: @green;
}

.c1.c2
{
  background-color: @red + @green;
}

产生：

.c1 {
  background-color: rgba(255, 0, 0, 0.5);
}
.c2 {
  background-color: rgba(0, 255, 0, 0.5);
}
.c1.c2 {
  background-color: #ffff00;
}

Answer 2

不，你必须为每种颜色使用单独的css。

 .c3 { background-color: Yellow;}

为第三个div。