gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:21:33 24 4
gpt4 key购买 nike

<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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com