显示第一类类型答案

【问题标题】：display first of class type显示第一类类型
【发布时间】：2011-06-21 01:28:58
【问题描述】：

我有一个项目列表，每个项目都有一个类，并且该类自始至终重复。我只想显示每个类的第一个实例。仅使用 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 个列表项。

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

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

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

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

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

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

【讨论】：

您可能想尝试display: list-item; 而不是block，但为general sibling combinator +1。
~ 选择器在 CSS 2.1 及更低版本中不存在。所以这在非 CSS3 浏览器中很可能会失败。
@Luc1245：我们都可以看到 OP 在他们的问题中添加了 CSS3 标签，所以这个答案反映了这个事实。他们显然需要 CSS3 代码而不是 2.1
@Luc1245：~ 组合器是 IE（IE7+ 及其他）方面支持最广泛的 CSS3 选择器之一。

【解决方案2】：

在 CSS2 中你可以使用：

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

其中+ 是CSS2 adjacent selector

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

【讨论】：

这只有在具有不同类名的项目之间不混合时才有效。即使在这种情况下，要使其正常工作，您也必须添加所有类名排列才能使其正常工作。

【解决方案3】：

对于您想要隐藏的任何项目，只需为其添加一个 id。

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

CSS：

#hide { display:none; }

【讨论】：

不能有多个具有相同 id 的项目。我猜你的意思是class="hide" 和.hide！