:first-child和:last-child适用于所有元素

时间:2015-05-30 20:59:03

标签: html css css-selectors

我遇到了一个奇怪的问题:first-child和:last-child selectors。当我将其应用于子菜单链接时,它适用于所有子菜单链接。我只需要在子菜单中的第一个和最后一个链接上创建不同的效果。

这是HTML:

<nav id="menu">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a>
            <ul>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
                <li><a href="#">sub4</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li></li>
    </ul>
</nav>

这是CSS:

nav#menu{ width:100%; text-align:center; z-index:999; }
nav#menu li{ display:inline-block; }
nav#menu li.voltar{ display:none; }
nav#menu a{ display:block; padding:0.75rem 1.3rem; font-size:0.7rem; }
nav#menu li:hover a{ background:#00afef; color:#fff; }
nav#menu li ul{ display:none; }
nav#menu li:hover ul{ display:block; position:absolute; width:12rem; }
nav#menu li ul li{ display:block; }
nav#menu li ul li a{ border-bottom:#0098df solid 1px; }
nav#menu li ul li:hover a{ background:#0064ba; }

我试过

nav#menu li ul li a:first-child{ color:red; }
nav#menu li ul li a:last-child{ color:blue; }

但它适用于所有人。 = /

3 个答案:

答案 0 :(得分:3)

a没有孩子,li会这样做,所以请在那里申请。

记住:last-child的作用:

  

:last-child选择器允许您直接定位最后一个元素   在其包含元素内。

在您的情况下,

a不是包含元素。

所以nav#menu li ul li:first-child a { color:red; }更有意义。

http://jsfiddle.net/4Lefkxog/

enter image description here

答案 1 :(得分:2)

你做错了!用这个!您需要:first-child:last-child使用<li>而不是<a>代码。

nav#menu li ul li:first-child a { color:red; }
nav#menu li ul li:last-child a { color:blue; }

原因是<a>标记是:first-child标记的唯一子标记(即:last-child<li>)。但您的意思是申请第一个<li>元素和最后一个<li>元素。 :)

答案 2 :(得分:0)

试试这个:

nav#menu li ul li:first-child a { color:red; }
nav#menu li ul li:last-child a { color:blue; }