只显示未知类的第一个实例

问题描述：

这是可能的CSS？我想仅显示未知类的第一个实例，还是我需要使用Javascript？只显示未知类的第一个实例

<div class="agendaDay apr24">24 April</div> 
<div class="agendaDay apr24">24 April</div> 
<div class="agendaDay apr25">25 April</div> 
<div class="agendaDay apr26">26 April</div>

希望的输出：

<div class="agendaDay apr24">24 April</div> 
<div class="agendaDay apr24" style="display:none">24 April</div> 
<div class="agendaDay apr25">25 April</div> 
<div class="agendaDay apr26">26 April</div>

基本上。我不知道类名是什么，但是想知道是否可以用css选择可能重复的类名。

考虑到当你知道班级时你根本无法做到这一点，我会说不。 – cimmanon

这是重复的，但这个问题不是这样。 – BoltClock

如果您知道班级名称，我想这几乎是不可能的，但如果您不知道，那么很明显，不会。 –

答

这个怎么样？

.apr24:nth-child(2){ 
    display: none; 
}

用CSS3，你可以这样做：

div[class*="apr24"]:nth-child(2){ 
    display: none; 
}

意思是，如果一个div有类apr24做一些事情。

答

如果你知道类名（这是不具体情况），你可以使用一个技巧与:first-of-type选择，

.apr24 {display: none} 
.apr24:first-of-type {display: block}

Fiddle

不过，如果你是允许使用javascript 最终，您可以使用:contains来定位特定文本并显示第一个文本。就像这样：

$('div:contains("24 April")').hide().first().show();

Fiddle with js possibility

答

谢谢，不能够通过CSS来做到这一点，这是我在JS的解决方案。

$(".agendaDay").each(function(i, obj) { 
    if(i>0){ 
     if($(".agendaDay:eq("+i+")").attr("rel") == $(".agendaDay:eq("+(i-1)+")").attr("rel")){ 
        $(".agendaDay:eq("+i+")").attr("hidden","hidden"); 
     } 
    } 
}

渲染页面后，我期待通过每个格，如果前面的div的“相对”属性等于当前一个那么我躲在当前股利。

答

你可以，如果你知道类的名字，做同样的事情：

.apr24 { 
    display: block; 
} 

.apr24 ~ .apr24 { 
    display: none; 
}

的~ CSS选择器挑选所有的兄弟姐妹，你可以隐藏。

我假设你生成你的日程HTML的列表时，做在后端一些逻辑，因此，如果您正在使用SCSS /更少，那么你可以这样做：

# HTML 
<section class="agendaMonth"> 
    <div class="agendaDay d24">24 April</div> 
    <div class="agendaDay d24">24 April</div> 
    <div class="agendaDay d25">25 April</div> 
    <div class="agendaDay d26">26 April</div> 
</section>

而CSS可以这样产生：

# SCSS 
@for $i from 1 through 31 { 
    SECTION.agendaMonth DIV.d#{$i} ~ DIV.d#{$i} {display: none;} 
}

您需要的部分，标签是“中断”的兄弟选择器，所以它不针对任何后来几个月d24原因。

希望这会有所帮助。

只显示未知类的第一个实例

相关推荐