Question

我有一个项目列表，每个项目都有一个类，并且整个课程都在重复。我想只显示每个类的第一个实例。只有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}

所以在上面的代码中，只有1st，3rd＆amp;第五个列表项应该显示。

Answer 1

使用此代码并根据需要添加任意数量的类。

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

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

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

如果您有一组预定义的类名，这当然是微不足道的。如果你的类名是未知的和/或它们的数量是无法管理的，那么最好采用一些脚本（使用jQuery可以帮助很多）

Answer 2

在CSS2中，您可以使用：

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

其中+是CSS2 adjacent selector

但我认为不可能同时对每种颜色使用单一规则。

Answer 3

对于您要隐藏的任何项目，只需向其添加ID即可。

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

CSS：

#hide { display:none; }

首先显示类类型

3 个答案: