:first-child 选择器选择多个孩子

Question

我正在尝试将样式仅应用于元素的第一个子元素。我在 css 中使用 :first-child 来实现这一点，但看起来这不是我正在寻找的行为。

以以下标记为例：

<ul class="myUl">
    <ul class="mySubUl">
        <li>foo0</li>
        <li>foo1</li>
    </ul>
    <ul class="mySubUl">
        <li>foo2</li>
        <li>foo3</li>
    </ul>
</ul>
======================
<ul class="myUl">
    <li>foo0</li>
    <li>foo1</li>
    <ul class="mySubUl">
        <li>foo2</li>
        <li>foo3</li>
    </ul>
</ul>

和这个简单的 CSS：

ul.myUl li:first-child {
    color: red;
}

现场小提琴：http : //jsfiddle.net/bsSDh/1/

这不仅适用于ul.myUl元素的第一个子元素，也适用于 的第一个子元素ul.subUl。如果 CSS 选择器是ul li:first-child（有效），我会期望这种行为，但是由于我向选择器添加了一个类，我希望只将该样式应用于第一个孩子。

为什么这种风格不仅适用于第一个孩子？我是否遗漏了一些关于first-child规格的信息或以错误的方式使用选择器？

Answer 1

我认为您需要一个额外的子选择器元素，如下所示：

ul.myUl > li:first-child {
    color: red;
}

示例小提琴

您的选择器选择<li>以下任何ul.myUL一个，即第一个孩子。由于这仅引用直接父级而不是任何其他祖先，因此所有其他<li>匹配项也是如此。

编辑

在您发表评论之后，我假设您将需要一个像这样更复杂的选择器：

ul.myUl > li:first-child,
ul.myUl > ul:first-child > li:first-child {
        color: red;
}