Question

我想要的：了解n-child（n）。我的理解是，nth- child（1）将选择每个第一个元素。所以应该选择苹果，水果，香蕉来展示红色。

实际显示：但番茄和芒果也被选中并显示为红色。

代码：

＆＃13;

a {
    text-decoration: none;
    color: black;
}

:nth-child(1) {
    color: red;
}

＆＃13;

<ul>
    <li>apple</li>
    <li>tomato</li>
    <li>
        <a href="#">fruit</a>
        <a href="#">juice</a>
    </li>
</ul>
<div>
    <span>
        <a href="#">banana</a>
        <em>mango</em>
    </span>
</div>

＆＃13;

Answer 1

首先，:nth-child(1)还包含html:nth-child(1)，这意味着所有文字都是红色的。另请注意，ul是body的第一个孩子。运行代码段时会添加html和body元素。）

几乎所有文字都是红色的原因有点复杂：

apple：red，因为它是li

ul

番茄：红色，因为它继承了ul的颜色，这是body
fruit：red，因为它是a元素中第一个li的文本（:nth-child(1)获胜的样式）
juice：black，因为它是a元素的文本，不是另一个元素的第一个子元素（使用了a的样式）
banana：red，因为它是span元素的第一个子元素的文本
芒果：红色，因为em继承了其父span）的文本颜色，这是div的第一个子项，因此应用了:nth-child(1)的样式

另请注意，div中的任何文字都是红色的，因为div会继承html（第一个孩子）的颜色。您可能希望为html指定明确的文本颜色，而不是可以使用。

Answer 2

阿尔詹先生的回答是完美的。除此之外，我已经更改了您的代码以便您更好地理解。

    <ul>
    <li>apple</li>
    <li>tomato</li>
    <li>
        <a href="#">fruit</a>
        <a href="#">juice</a>
    </li>
</ul>
<div>
    <span>
        <a href="#">banana</a>
        <em>mango</em>
    </span>
</div>

Working Fiddle here

此链接将帮助您更好地了解有关css中{nh-child'的更多信息http://nthmaster.com/

css nth-child（1）选择了第二个元素，为什么？

2 个答案: