選擇所有錨元素但不是：類組中的第一個孩子錨

Question

我必須隱藏所有錨元素，但不是類組的第一個子元素。在錨點開始之前，我會放置h2標籤。與這個h2我無法得到確切的結果。

View in JS fiddle

的Html

<div id="main" > 
     <div class="album"> 
      <h2>title 1 </h2> 
      <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
       show this 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
       not show 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
       not show        
      </a> 
     </div> 
     <div class="album"> 
      <h2>title 2 </h2> 
      <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
       show this 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
       not show 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
       not show        
      </a> 
      <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
       not show       
      </a> 
     </div> 
     <div class="album"> 
      <h2>title3 </h2> 
      <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
       show this 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
       not show 
      </a> 
      <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
       not show        
      </a> 
      <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
       not show        
      </a> 
      <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
       not show        
      </a> 
      <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
       not show       
      </a> 
      <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
       not show        
      </a> 
     </div> 
    </div> 

：預期結果：

標題1 顯示此

標題2 顯示此

冠軍3 顯示此

我應用CSS爲以下但不工作。

.album a:not(:first-child) { 
     display:none; 
    } 

我得到正確的結果，當我忽略

<h2>...</h2> 

Answer 1

嘗試：

.album a:not(:first-of-type) { 
    display:none; 
} 

Updated fiddle here.

Answer 2

嘗試這樣的事情

.album a { 
    display:none; 
} 
.album a:first-of-type { 
    display:block; 
} 

Answer 3

你在這裏。

WORKING DEMO

CSS的變化：

.album a{display:none;} 
.album a:first-of-type{display:block;} 

希望這有助於。

Answer 4

<div id="main" > 
    <div class="album"> 
     <h2>title 1 </h2> 
     <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
      show this 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
      not show 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
      not show        
     </a> 
    </div> 
    <div class="album"> 
     <h2>title 2 </h2> 
     <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
      show this 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
      not show 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
      not show        
     </a> 
     <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
      not show       
     </a> 
    </div> 
    <div class="album"> 
     <h2>title3 </h2> 
     <a title="Campus photo" href="images/gallery/campus/0.jpg"> 
      show this 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/1.jpg"> 
      not show 
     </a> 
     <a title="Campus photo" href="images/gallery/campus/2.jpg"> 
      not show        
     </a> 
     <a title="Campus photo" href="images/gallery/campus/3.jpg"> 
      not show        
     </a> 
     <a title="Campus photo" href="images/gallery/campus/4.jpg"> 
      not show        
     </a> 
     <a title="Campus photo" href="images/gallery/campus/5.jpg"> 
      not show       
     </a> 
     <a title="Campus photo" href="images/gallery/campus/6.jpg"> 
      not show        
     </a> 
    </div> 

CSS

.album a{ 
display:none; 
} 
.album a:nth-child(2){ 
display:block; 
} 
.album h2 { 
    float: left; 
    margin: 0 20px; 
} 
.album{ 
clear:both; 
} 

結果應該

謝謝！