选择所有锚元素但不是：类组中的第一个孩子锚

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; 
} 

结果应该

谢谢！