首先显示类类型

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}

因此在上面的代码中,只显示第1,第3和第5个列表项.

Answer 1

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

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

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

检查这个使用HTML的JSFiddle,只显示每个类的第一个元素.

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