3

我知道如何获得我的 li 的第一个锚点，但问题是，我的代码有 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>
4

3 回答 3

5

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

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

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

JSFiddle

编辑后

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

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

JSFiddle

要定位第一个子菜单锚点：

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

JSFiddle

于 2013-11-02T12:35:31.703 回答
2

如果你不想使用:first-child你可以使用这个：

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

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

这只会选择<li><a>列表中的第一个，检查演示。

演示

于 2013-11-02T12:37:33.380 回答
1

假设您的意思是每个 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/

在此处输入图像描述

于 2013-11-02T13:00:23.490 回答