只顯示未知類的第一個實例

這是可能的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選擇可能重複的類名。

來源

2016-04-24 TweakItGuy

考慮到當你知道班級時你根本無法做到這一點，我會說不。 – cimmanon

這是重複的，但這個問題不是這樣。 – BoltClock

如果您知道班級名稱，我想這幾乎是不可能的，但如果您不知道，那麼很明顯，不會。 –

這個怎麼樣？

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

用CSS3，你可以這樣做：

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

意思是，如果一個div有類apr24做一些事情。

來源

2016-04-24 17:49:03

如果你知道類名（這是不具體情況），你可以使用一個技巧與: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

來源

2016-04-24 17:54:53

謝謝，不能夠通過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的「相對」屬性等於當前一個那麼我躲在當前股利。

來源

2016-04-25 21:30:06 TweakItGuy

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

.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原因。

希望這會有所幫助。

來源

2016-06-06 11:54:16 kunambi

只顯示未知類的第一個實例

回答

相關問題