为什么第二胎受我的第一胎色彩属性影响？

Question

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

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

Answer 1

color是从父元素继承的。...在这种情况下，li:first-child

因此，当您告诉li为红色时，它是所有子级继承的。

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

Answer 2

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

li {
    color:initial;
}

Answer 3

这是因为您嵌套了li。

第二个内部li被涂成红色，因为它是继承规则，该规则是从应用于第一个子外部li的样式（即其父元素）开始的。

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

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

或者，如果您只想给内部li上色：

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

Answer 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元素，那么选择器仍将在那里应用。