gpt4 book ai didi

css - 显示一流类型

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

我有一个元素列表,每个元素都有一个类别,并且该类别在整个过程中重复出现。我只想显示每个类的第一个实例。仅使用 CSS 是否可行?

<ul>
<li class="red">red</li>
<li class="red">red</li>
<li class="blue">blue</li>
<li class="blue">blue</li>
<li class="yellow">yellow</li>
<li class="red">red</li>
<li class="yellow">yellow</li>
</ul>
ul li {display:none}
ul li .red:first-child, ul li .blue:first-child, ul li .yellow:first-child { display:block}

所以在上面的代码中,只有第一个、第三个和第五个列表项应该显示。

最佳答案

使用此代码并根据需要添加尽可能多的类。

.red,
.blue,
.yellow
{
display: list-item;
}

.red ~ .red,
.blue ~ .blue,
.yellow ~ .yellow
{
display: none;
}

检查 this JSFiddle使用您的 HTML 并且仅显示每个类的第一个元素。

如果您有一组预定义的类名,这当然是微不足道的。如果你的类名未知和/或它们的数量难以管理,他们最好求助于一些脚本(使用 jQuery 会有很多帮助)

关于css - 显示一流类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6407907/

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