仅显示未知类的第一个实例答案

【问题标题】：Only display first instance of an unknown class仅显示未知类的第一个实例
【发布时间】：2016-08-17 22:57:06
【问题描述】：

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

【问题讨论】：

考虑到当你知道课程时你根本无法做到这一点，我会说不。
这是重复的，但不是那个问题。
如果你知道类名，我想这几乎是不可能的，但如果你不知道，那么显然，不会。

标签： css css-selectors

【解决方案1】：

这个怎么样？

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

使用 css3 你可以这样做：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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。

【讨论】：

【解决方案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-tag 的原因是为了“中断”兄弟选择器，因此它不会在以后的几个月中以 d24 为目标。

希望这会有所帮助。

【讨论】：