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

Posted 2023-03-16

【中文标题】仅显示未知类的第一个实例

【英文标题】：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 选择可能重复的类名。

【问题讨论】：

考虑到当你知道课程时你根本无法做到这一点，我会说不。

这是重复的，但不是那个问题。

如果你知道类名，我想这几乎是不可能的，但如果你不知道，那么显然，不会。

【参考方案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 为目标。

希望这会有所帮助。