Question

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

以下面的标记为例：

<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

我认为你需要一个额外的child selector元素：

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

Example Fiddle

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

修改

在你发表评论之后，我认为你需要一个像这样的复杂选择器：

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

Answer 2

选择器

ul.myUl li:first-child

选择li:first-child下面的任何ul.myUl（即ul内任何父亲的第一个孩子）。相反，您可能希望通过

选择直接子项

ul.myUl > li:first-child

甚至

ul.myUl > ul.subUl:first-child > li:first-child

Answer 3

注意Child Combinator（直接孩子）和Descendant Combinator（包含的任何元素）之间的差异。

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

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

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

Running Demo

：第一个子选择器选择多个子项

3 个答案: