为什么第二个孩子受我的第一个孩子的颜色属性影响? [英] Why is a second-child affected by my first-child color property?

问题描述

我正在整理选择器并测试我的知识，遇到了没有道理的问题.

I was finishing up selectors and testing my knowledge and encountered a problem that makes no sense.

从理论上讲，下面的代码应该将所有li的第一个子级都涂成红色，但是，第一个和第二个子级都涂成红色.

In theory, the code below should color all first children that are li red, yet, a first and second child are being colored red.

为什么第二个孩子在这里染成红色?

Why is the second child colored red here?

li:first-child{
    color: red;
}

<ul>
    <li>Peter
        <ol>
            <li>Juan</li>
            <li>Samuel</li>
        </ol>
    </li>
    <li>John
        <ol>
            <li>Patrick</li>
            <li>Spongebob</li>
        </ol>
    </li>
    <li>Sara
        <ol>
            <li>Jonathan</li>
            <li>Kragie</li>
        </ol>
    </li>
</ul>

推荐答案

color继承自父元素....在这种情况下，li:first-child

color is inherited from the parent element....in this case the li:first-child

因此，当您告诉li为红色时，它将由所有子级继承.

So when you tell the li to be a red color this is inherited by all its children.

您没有规则为子级覆盖此子项，因此它们会通过继承为着色/

You have no rule to override this for the children so they are colored by inheritance/

这篇关于为什么第二个孩子受我的第一个孩子的颜色属性影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！