仅将某些CSS应用于html中的第一次出现

Question

我有一个类似下面的html：

<div class="A"> --- Div 0 There can be multiple of this
    <div class="B C"></div>
</div>

<div class="A"> --- Div 1
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 2
    <div></div>
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 3
    <div class="B C D"></div>
</div>

我希望某些样式仅适用于Div1。 <div class="BCD"></div>

我已经使用css .BCD：first-of-type来执行此操作，但是它也会影响Div 3。

我没有对HTML的控制权，只想使用CSS来解决它

Answer 1

使用：first-child可在一组元素中获取第一个孩子。 尝试这个：

 .A:first-child > div.BC{ background-color:red; } 

 <div class="A"> --- Div 0 There can be multiple of this <div class="BC">There can be multiple of this</div> </div> <div class="A"> --- Div 1 <div class="BCD"></div> </div> <div class="A"> --- Div 2 <div></div> <div class="BCD"></div> </div> <div class="A"> --- Div 3 <div class="BCD"></div> </div>