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>

Answer 2

＆＃13;

＆＃13;

.whole-wrap div:first-child .A_class,
	.whole-wrap div:first-child .B_class,
	.whole-wrap div:first-child .C_class {
		display: block;
	}
	.A_class,
	.B_class,
	.C_class {
		display: none;
	}

＆＃13;

<div class="whole-wrap">   
    <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="whole-wrap">  
    <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="whole-wrap"> 
    <div>
        <div class="C_class">C</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这在单独的css中是无法实现的，至少目前不是这样。但我们可以实现您的输出。这是一个简单的例子

<style type="text/css">
    @media screen{
        .A_class * {visibility: visible;}
        .A_class{ position: absolute; }
        .B_class * {visibility: visible;}
        .B_class{ position: absolute; margin-top: 20px;}
        .C_class * {visibility: visible;}
        .C_class{ position: absolute; margin-top: 40px;}
    }
</style>