我有一个项目列表,每个项目都有一个类,并且该类在整个过程中重复。我只想显示每个类的第一个实例。
只用 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 个列表项。
使用此代码并根据需要添加任意数量的类。
.red,
.blue,
.yellow
{
display: list-item;
}
.red ~ .red,
.blue ~ .blue,
.yellow ~ .yellow
{
display: none;
}
Check 这个 JSFiddle http://jsfiddle.net/4V3Ld/它使用您的 HTML 并且仅显示每个类的第一个元素。
如果您有一组预定义的类名,这当然是微不足道的。如果你的类名未知和/或类名数量难以管理,最好使用一些脚本(使用 jQuery 会有很大帮助)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)