Question

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选择可能重复的类名。

Answer 1

这个怎么样？

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

使用css3，你可以这样做：

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

这意味着如果div有apr24类做某事。

Answer 2

如果你知道班级名称（不特定情况>），你可以使用: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

Answer 3

谢谢，因为无法通过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，如果前一个div的“rel”属性等于当前div，那么我隐藏了当前div。

Answer 4

如果你知道类名，你可以做类似的事情：

.apr24 {
    display: block;
}

.apr24 ~ .apr24 {
    display: none;
}

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

我假设您在生成议程HTML列表时在后端做了一些逻辑，所以如果您使用的是SCSS / LESS，那么您可以这样做：

# 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;}
}

您需要SECTION标记的原因是“中断”兄弟选择器，因此它不会在以后的几个月内定位d24。

希望这有帮助。

仅显示未知类

4 个答案: