CSS選擇不同課程之前的最後一堂課

Question

對不起，沒有真正知道如何描述更好。頁面看起來像這樣

注意：數據ID是隨機的，我不知道它們事先。

<main> 
    <h2 class="title">title1</h2> 
    <div id="1-3" class="content" data-id="1"></div> 
    <div id="1-2" class="content" data-id="1"></div> 
    <div id="1-1" class="content" data-id="1"></div> 

    <h2 class="title">title2</h2> 
    <div id="2-11" class="content" data-id="2"></div> 
    <div id="2-10" class="content" data-id="2"></div> 
    <div id="2-9" class="content" data-id="2"></div> 

    <h2 class="title">title3</h2> 
    <div id="3-18" class="content" data-id="3"></div> 
    <div id="3-17" class="content" data-id="3"></div> 
    <div id="3-16" class="content" data-id="3"></div> 
</main> 

有沒有什麼辦法來隱藏純CSS每個H2畢竟但上內容的div？我不能單獨使用id或data-id來定位他們。有沒有辦法選擇所有具有相同未指定屬性的元素？所以所有的數據ID =「相同」被選中，然後我可以取消隱藏nth-last-child（1）？我懷疑有這樣的事情。有什麼方法可以用CSS來完成這個任務嗎？

我目前隱藏每個.content，如果下一個兄弟不是.content與js但想知道它是否可能與CSS。

Answer 1

它不可能沒有任何scripting..you需要使用JavaScript或jQuery的

Answer 2

我會很想建議把的

<h2 class="title">title2</h2> 
<div id="2-11" class="content" data-id="2"></div> 
<div id="2-10" class="content" data-id="2"></div> 
<div id="2-9" class="content" data-id="2"></div> 

每一塊<section>裏面，像這樣：

<section> 
<h2 class="title">title2</h2> 
<div id="2-11" class="content" data-id="2"></div> 
<div id="2-10" class="content" data-id="2"></div> 
<div id="2-9" class="content" data-id="2"></div> 
</section> 

然後你可以...

div { 
 
display: none; 
 
width: 200px; 
 
height: 40px; 
 
color: rgb(255,255,255); 
 
} 
 

 
section:nth-of-type(1) div { 
 
background-color: rgb(255,0,0); 
 
} 
 

 
section:nth-of-type(2) div { 
 
background-color: rgb(0,127,0); 
 
} 
 

 
section:nth-of-type(3) div { 
 
background-color: rgb(0,0,255); 
 
} 
 

 
section div:last-of-type { 
 
display: block; 
 
}

<main> 
 
    <section> 
 
    <h2 class="title">Title 1</h2> 
 
    <div id="1-3" class="content" data-id="1">Div 1</div> 
 
    <div id="1-2" class="content" data-id="1">Div 2</div> 
 
    <div id="1-1" class="content" data-id="1">Div 3</div> 
 
    </section> 
 

 
    <section> 
 
    <h2 class="title">Title 2</h2> 
 
    <div id="2-11" class="content" data-id="2">Div 1</div> 
 
    <div id="2-10" class="content" data-id="2">Div 2</div> 
 
    <div id="2-9" class="content" data-id="2">Div 3</div> 
 
    </section> 
 

 
    <section> 
 
    <h2 class="title">Title 3</h2> 
 
    <div id="3-18" class="content" data-id="3">Div 1</div> 
 
    <div id="3-17" class="content" data-id="3">Div 2</div> 
 
    <div id="3-16" class="content" data-id="3">Div 3</div> 
 
    </section> 
 
</main>