Question

如何选择元素li，元素nav > ul的子元素？

正如您在以下代码段中看到的，我可以选择nav > ul并删除列表样式。但是，我无法仅更改Link1，Link2和Link3的颜色。

nav > ul {
    list-style: none;
}

nav > ul li {
    color: red;
}

<nav>
    <ul>
        <li>
            Link1
        </li>
        <li>
            Link2
        </li>
        <li>
            Link3
        </li>
        <li>
            <ul>
                <li>
                    Link3-1
                </li>
                <li>
                    Link3-1
                </li>
            </ul>
        </li>
    </ul>
</nav>

根据this JSFiddle，答案nav > ul > li不起作用。对于那些对这个问题进行投票的人，你能至少提供一个理由吗？

Answer 1

CSS3中有四种不同的组合器，在这种情况下我们使用了两种组合：

后代选择器 （由'空格'分隔的选择器）

子选择器 （由'＆gt;'分隔的选择器）

所以 “nav＆gt; ul＆gt; li” （选择第一个UL上的四个LI礼物），然后应用红色，因此所有文本颜色变为红色。

由于第二个UL是第四个LI的孩子，它也会变红。

要解决这个问题，我们需要为所有后续的UL创建规则。

nav > ul {
    list-style: none;
}

nav > ul > li { /* only direct children */
    color: red;
}

nav > ul ul { color: black; } // resets the color of the nested ULs

Answer 2

给他们类名，如：

<li class = "red_font">

然后将您的CSS更改为：

.red_font{
 color:red;
}

Answer 3

此代码运行，我认为父li元素中的li继承颜色，因此颜色会转到所有li元素。

我建议您使用另一个选择器（如id或class）来指定您想要操作的元素。

＆＃13;

<nav>
    <ul>
        <li>
            Link1
        </li>
        <li>
            Link2
        </li>
        <li>
            Link3
        </li>
        <li>
            <ul>
                <li>
                    Link3-1
                </li>
                <li>
                    Link3-1
                </li>
            </ul>
        </li>
    </ul>
</nav>

＆＃13;

DateTime

＆＃13;

Answer 4

有很多方法可以达到你想要的效果，这是另一种方法，但尚未在其他答案中提出：

添加课程＆＃34;跳过＆＃34;到包含第二级链接的:not，并使用nav > ul { list-style: none; } nav > ul > li:not(.skip) { color: red; }选择器在css中跳过它：

＆＃13;

<nav>
    <ul>
        <li>
            Link1
        </li>
        <li>
            Link2
        </li>
        <li>
            Link3
        </li>
        <li class="skip">
            <ul >
                <li>
                    Link3-1
                </li>
                <li>
                    Link3-1
                </li>
            </ul>
        </li>
    </ul>
</nav>

＆＃13;

{{1}}

＆＃13;

Answer 5

这是因为你选择了每个孩子。请参阅以下解决方案：

nav > ul {
    list-style: none; /* This will disable listing styles */
}

nav > ul > li {
    color: red; /* this will select Link1, Link2 and Link3 (first level) */
}

nav > ul > li > ul {
    color: #000; /* this will select Link3-1 and Link3-2 (second level) */
}

<nav>
    <ul>
        <li>
            Link1
        </li>
        <li>
            Link2
        </li>
        <li>
            Link3
        </li>
        <li>
            <ul>
                <li>
                    Link3-1
                </li>
                <li>
                    Link3-2
                </li>
            </ul>
        </li>
    </ul>
</nav>

选择`nav＆gt;的`li` ul`

5 个答案: