<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 部分是动态生成的。
最佳答案
试试这个 在像下面这样重复的 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>
关于CSS:隐藏不同div中的重复类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39011481/