CSS:隐藏不同div中的重复类

Question

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="B_class">B</div>
</div>

<div>
    <div class="B_class">B</div>
</div>

<div>
    <div class="B_class">B</div>
</div>

<div>
    <div class="C_class">C</div>
</div>

结果:

A
A
A
A
B
B
B
C

预期结果:

A
B
C

大家好，根据上面的代码，我如何只使用css来显示预期的结果。在这种情况下不允许使用 Javascript 和 jQuery。

添加很抱歉没有提到 HTML 部分。 HTML 部分是动态生成的。

Answer 1

试试这个在像下面这样重复的 div 中，你必须为一个 div 保留不同的类名

.A_class{
    display: none;
 }
 .A_Show .A_class{
    display: block;
 }

    
.B_class{
   display: none;
 }
    .B_show .B_class{
     display: block;
 }
    
 .C_class{
    display: none;
  }
  .C_show .C_class{
     display: block;
 }   

<div class="A_Show">
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div>
    <div class="A_class">A</div>
</div>

<div class="B_show">
    <div class="B_class">B</div>
</div>

<div>
    <div class="B_class">B</div>
</div>

<div>
    <div class="B_class">B</div>
</div>

<div class="C_show">
    <div class="C_class">C</div>
</div>

<div>
    <div class="C_class">C</div>
</div>