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

Question

我想要的是:理解 nth-child(n)。我的理解是，第n- 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:红色，因为它是 ul 的第一个 li 元素中的文本
• tomato:红色，因为它继承了ul的颜色，这是body中的第一个元素
• fruit:红色，因为它是 li 元素中第一个 a 的文本(样式为 :nth-child(1)获胜)
• juice:黑色，因为它是 a 元素的文本，该元素不是另一个元素的第一个子元素(使用 a 的样式)
• banana:红色，因为它是 span 元素的第一个子元素的文本
• mango:红色，因为 em 继承了其父级 (span) 的文本颜色，该父级 (span) 是 div 的第一个子级，因此应用 :nth-child(1) 样式

另请注意，div 中的任何文本都将为红色，因为 div 继承了 html 的颜色(这是第一个子元素) )。您可能需要为 html 指定明确的文本颜色，可以使用它来代替。