用纯css怎么实现A元素+B元素，A是绿色背景，A元素+C元素，A是红色背景？

Question

<div class="A"></div> // 期待这个样式是绿色背景
<div class="B"></div>

<div class="A"></div>// 期待这个样式是红色背景
<div class="C"></div>

Answer 1

给一个思路：
这个需求可以实现，但是首先说明一点是CSS中，不能用后面的元素来约束前面元素的样式，仅能用前面元素约束后面元素的样式。
实现方案为使用flex，DOM结构上让A在BC后面，但是使用order属性调换位置。
效果：

<div class="container">
    <div class="B">B</div>
    <div class="A">A</div>
</div>

<div class="container">
    <div class="C">C</div>
    <div class="A">A</div>
</div>

.A, .B, .C {
    width: 100px;
}

.A {
    height: 100px;
    order: 1
}

.B, .C {
    background: grey;
    height: 20px;
    order: 2
}

.C + .A {
    background: red;
}

.B + .A {
    background: green;
}

.container {
    display: flex;
    flex-direction: column;
    margin: 10px;
}