仅在第一个ul内获得第一个li的第一个锚点

Question

我知道如何获得我的第一个锚点，但问题是，我的代码有2个同一类的子菜单，我只希望第一个ul受到影响。

    <div id="navigation">
        <ul>
            <li>
                <a href="#">Main menu</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub menu</a>
                        <ul class="sub-menu">
                            <li><a href="#">Sub sub menu</a></li>
                            <li><a href="#">Sub sub menu</a></li>
                            <li><a href="#">Sub sub menu</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div> 

Answer 1

我在代码中找不到锚点，但我假设每个<li>都包含一个？在这种情况下，您可以选择它：

#navigation > ul > li:first-child a{color:#FFF}

就目前而言，first-child并不是真正需要的 - 只有在您瞄准的目标之后直接添加更多<li>时才会发挥作用。

JSFiddle

修改后

您更改了代码，因此我想我应该更新我的答案。要定位“主菜单”锚点：

#navigation > ul > li > a{color:#F00}

JSFiddle

定位第一个子菜单锚：

#navigation > ul > li > ul > li > a{color:#F00}

JSFiddle

Answer 2

如果你不想使用:first-child，你可以使用它：

问题更新后更新了代码和演示。

#navigation > ul > li > ul > li > a {color:red;}

这将只选择列表的第一个<li><a>，查看演示。

<强> DEMO

Answer 3

假设你的意思是每个李里面都有一个锚，就像那样：

#navigation .sub-menu:first-child li:first-child a {
    background-color: yellow;
}

<div id="navigation">
    <ul class="sub-menu">
        <li> <a href="#">1<a/>
        </li>
            <li> <a href="#">1.1<a/>
        </li>
        <ul class="sub-menu">
            <li><a href="#">2<a/></li>
            <li><a href="#">3<a/></li>
            <li><a href="#">4<a/></li>
        </ul>
    </ul>
</div>

我故意为第一个ul添加了另一个li - 以确保它有效。

参见JSFiddle示例： http://jsfiddle.net/rKynY/4/