【问题标题】：Why is a second-child affected by my first-child color property?为什么我的第一个孩子颜色属性会影响第二个孩子？
【发布时间】：2019-11-19 23:04:15
【问题描述】：

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

理论上，下面的代码应该将所有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>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

color 继承自父元素....在本例中为 li:first-child

因此，当您告诉 li 为红色时，它会被其所有子代继承。

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

【讨论】：

【解决方案2】：

这是因为颜色是从父元素继承的，请尝试将其添加到您的 CSS 中以覆盖它：

li {
    color:initial;
}

【讨论】：

【解决方案3】：

这是因为你嵌套了lis。

第二个内部li 被涂成红色，因为它继承应用到第一个子外部li 的样式的规则，即它的父级。

li:first-child { color: red; }
li:not(:first-child) { color: black; }

这将覆盖继承并导致第一个外部和内部lis 的文本为红色。 Fiddle

或者，如果您只想为内部lis 着色：

li li:first-child { color: red; }

【讨论】：

【解决方案4】：

li:first-child 选择器还将选择父列表中的第一个 li 元素。您可以使用直接后代来定位选择器，也可以使用类。

选项 1：父列表上的类选择器

这是首选选项，因为它会自动命名您的 CSS。定位子元素时，所有选择器都将以 .menu 开头。

<ul class="menu">
    <li>Peter<ol>
        <li>Juan</li>
        <li>Samuel</li>
    </ol></li>
</ul>

.menu ol li:first-child{
  color: red;
}

如果你想覆盖菜单的样式，你可以在菜单元素上使用一个额外的类，例如使用下面的选择器来定位它。 .menu.horizontal

选项 2：列表项上的类选择器

此选项与第一个选项具有相同的好处，但现在 .menuItem 是独立命名空间的。

<ul>
    <li class="menuItem">Peter<ol>
        <li>Juan</li>
        <li>Samuel</li>
    </ol></li>
</ul>

.menuItem ol li:first-child{
  color: red;
}

选项 3：直接后代选择器

ol>li:first-child{
  color: red;
}

使用类总是更好，因为如果您在其他地方使用 ol 元素，选择器仍然适用于那里。

【讨论】：