1

我正在尝试将样式仅应用于元素的第一个子元素。我在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规格的某些内容或以错误的方式使用选择器？

4

3 回答 3

5

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

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;
}
于 2013-09-23T15:56:13.930 回答
1

选择器

ul.myUl li:first-child

选择 anyli:first-child下的任何ul.myUl（即 中的任何父级的第一个子级ul）。相反，您可能想通过

ul.myUl > li:first-child

甚至

ul.myUl > ul.subUl:first-child > li:first-child
于 2013-09-23T15:55:07.723 回答
0

注意Child Combinator（直接子代）和Descendant Combinator（包含的任何元素）之间的区别。

您应该使用这两个选择器来实现两种已知情况所需的结果：

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

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

Running Demo

于 2013-09-23T15:57:49.407 回答