css nth-child(1)选择了第二个元素,为什么？

Question

我想要的:了解n-child(n).我的理解是,nth-child(1)将选择每个第一个元素.所以应该选择苹果,水果,香蕉来展示红色.

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

码:

a {
    text-decoration: none;
    color: black;
}

:nth-child(1) {
    color: red;
}

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

Answer 1

首先,:nth-child(1)还包括html:nth-child(1),这意味着所有文本都将是红色的.还要注意,这ul是第一个孩子body.(html并body在运行代码段时添加元素.)

几乎所有文本都是红色的原因有点复杂:

• apple:red因为它是文本中的第一个li元素ul
• 番茄:红色,因为它继承了颜色ul,这是第一个元素body
• 水果:红色,因为它是元素中的第a一个文本li(:nth-child(1)胜利的样式)
• juice:black,因为它是一个a元素的文本,不是另一个元素的第一个子元素(使用的样式a)
• banana:red,因为它是span元素的第一个子元素的文本
• 芒果:红色的,因为em继承其父的文本颜色(span),这是的第一个孩子div,这样的造型:nth-child(1)应用

另请注意,任何文本都div将为红色,因为它div继承了颜色html(这是第一个孩子).您可能希望指定html可以替代使用的显式文本颜色.