时间戳

首页 > 解决方案 > 为什么我的第一个孩子颜色属性会影响第二个孩子？

html - 为什么我的第一个孩子颜色属性会影响第二个孩子？

问题描述

我正在整理选择器并测试我的知识，遇到了一个毫无意义的问题。

理论上，下面的代码应该将所有第一个孩子着色为li红色，然而，第一个和第二个孩子被着色为红色。

为什么第二个孩子在这里涂成红色？

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>

标签： htmlcsscss-selectors

解决方案

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

所以当你告诉它li是红色时，它的所有孩子都会继承它。

你没有规则为孩子们覆盖这个，所以他们被继承着色/

推荐阅读