css - :first-child selector selects more than one children

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;
}

现场 fiddle :http://jsfiddle.net/bsSDh/1/

这不仅适用于 ul.myUl 元素的第一个子元素，也适用于 ul.subUl 元素的第一个子元素。如果 CSS 选择器是 ul li:first-child (有效)，我会预料到这种行为，但由于我正在向选择器添加一个类，所以我希望将该样式仅应用于第一个 child 。

为什么样式不仅适用于第一个 child ？我是否遗漏了有关 first-child 规范的内容或以错误的方式使用了选择器？

Answer 1

我想你还需要一个 child selector像这样的元素:

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

Example Fiddle

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

编辑

在您发表评论之后，我认为您将需要一个更复杂的选择器，如下所示:

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