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

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

结果应该看起来像

谢谢！