获取第一个ul内第一个li的第一个锚点。

Question

我知道如何获取我的li的第一个锚点，但问题是，我的代码有两个相同类别的子菜单，我只想影响第一个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> 

- Jay Query

---

我已经更新了我的回答，请在未来第一次发布问题时确保您的代码正确。 - George

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

- George

Answer 2

如果您不想使用:first-child，可以使用以下代码：

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

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

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

- Carl0s1z

---

嘿，伙计，我喜欢你的演示，也很高兴不需要使用:first-child。请再次检查原始帖子，因为我忘记放一些HTML部分在里面，现在已经编辑过了。抱歉！ - Jay Query

好的，没问题。现在你只想在CSS中影响第一个<ul>，而不再是<li>了？我理解得对吗？ - Carl0s1z

不，一切都是一样的，我想要首先影响“ul.sub-menu li a”。你之前的代码没有起作用，我认为这是因为原始代码中有一些额外的ul和li（这就是为什么我编辑了原始帖子）。 - Jay Query

Answer 3

假设您的意思是每个li内部都有一个锚点，类似于这样：

#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/

- mork