Css 显示类类型的第一个

我有一个项目列表，每个项目都有一个类，整个类都是重复的。我只想显示每个类的第一个实例。 仅仅使用CSS就可以吗

红色
红色
蓝色
蓝色
黄色
红色
黄色

ulli{显示：无}
红色：第一个孩子，ul-li。蓝色：第一个孩子，ul-li。黄色：第一个孩子{display:block}

---

因此，在上面的代码中，只应显示第1、第3和第5个列表项。

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

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

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

检查是否使用HTML并仅显示每个类的第一个元素

如果您有一组预定义的类名，这当然是微不足道的。如果您的类名未知和/或数量难以管理，最好使用一些脚本（使用jQuery会有很大帮助）

在CSS2中，您可以使用：

LI .red + .red { display: none; }
LI .blue + .blue { display: none; }
LI .yellow + .yellow { display: none; }

其中

+

是

---

但我认为不可能一次对每种颜色使用一条规则。

对于任何要隐藏的项目，只需为它们添加一个id即可

<li class="red">red</li>
<li class="red" id="hide">red</li>

---

您可能希望尝试使用+1代替

块

。CSS 2.1及以下版本中不存在

~

选择器。所以这在非CSS3浏览器中很可能会失败。@Luc1245：正如我们所看到的，OP在他们的问题中添加了CSS3标记，所以这个答案反映了这个事实。他们显然需要CSS3代码，而不是2。1@Luc1245：combinator是IE（IE7+和其他）中最受广泛支持的CSS3选择器之一。这仅在具有不同类名的项之间不混合时有效。即使在这种情况下，要使其工作，您也必须添加所有类名排列以使其工作。不能有多个具有相同id的项。我猜您的意思是

class=“hide”

和

。hide

！

#hide { display:none; }