css - 如何将不同 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)
}

我希望第三个 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;
}

---

编辑：

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

较少的：

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

对于第三个分区。