显示第一个类的类型

我有一个项目列表，每个类和类都在整个过程中重复。我只想显示每个班级的第一个实例。只用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列表项应该显示。

来源

2011-06-20 calebo

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

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

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

检查this JSFiddle使用你的HTML，而仅显示每个类的第一要素。

这当然是微不足道的，如果你有一组预定义的类名。如果你的类名是未知的和/或有他们的难以管理的数量，他们这将是最好求助于一些脚本（使用jQuery将有助于地段）

来源

2011-06-20 07:15:10

你可能想尝试['显示：列表项;'（http://www.w3.org/TR/CSS2/visuren.html#display -prop）而不是'block'，而是[通用兄弟组合器]的+1（http://www.w3.org/TR/css3-selectors/#general-sibling-combinators）。 –

@David：谢谢。你是对的。更新我的代码。 –

'〜'选择器在CSS 2.1及以下版本中不存在。所以这在非CSS3浏览器中可能会失败。 – Luc125

在CSS2你可以使用：

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

+是CSS2 adjacent selector

但我认为这是不可能的一次使用每一种颜色的单一规则。

来源

2011-06-20 07:37:21 Luc125

这只会在不同类名称**的项目在彼此之间不混合时才起作用。为了使它工作，即使在这种情况下，你也必须添加所有类名称组合来使其工作。 –

-3

对于任何你想隐藏的物品，只需向他们添加一个ID。

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

CSS：

#hide { display:none; }

来源

2011-06-20 08:27:03 Magnum26

不能有多个具有相同ID的项目。我想你的意思是'class =“hide”'和'.hide'！ – Benjamin

显示第一个类的类型

回答

相关问题