html - 仅对 html 中的第一次出现应用某些 css

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>

我希望将某些样式应用到 <div class="B C D"></div>仅适用于 Div 1。

我已经使用 css .B.C.D:first-of-type 来执行此操作，但它也影响了 Div 3。

我无法控制 HTML，只想使用 CSS 解决它

Answer 1

使用:first-child在一组元素中获得第一个 child 。试试这个:

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

<div class="A"> --- Div 0 There can be multiple of this
    <div class="B C">There can be multiple of this</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>