Question

我需要选择一个特定元素，只要它作为div的第一个子元素出现。是否有一个CSS选择器可以处理这种情况？

例如，我想选择这个数字：

<div>
    <figure></figure>
    <p></p>
    <p></p>
</div>

但我不想选择这个：

<div>
    <p></p>    
    <figure></figure>
    <p></p>
</div>

我无法更改HTML，因此无法添加课程。我知道:first-child和:first-of-type选择器，但他们自己并不适合这种情况。如果第一个孩子只是一个数字，我怎么能选择它？

Answer 1

您可以将:first-child选择器与descendant selector一起使用，如下所示：

JSFiddle - DEMO

div figure:first-child {
    color:red;
}

使用CSS > child selector

OR：（由@Alohci建议）

<强> DEMO

div > figure:first-child {
    color:red;
}

Answer 2

我没有看到figure:first-child选择器出现任何问题。只有它是其父级的第一个孩子时才会选择<figure>元素。

虽然:first-child表示父项子树中第一个子元素的任何元素，但figure部分会限制选择器仅在元素为<figure>时才匹配元素

Answer 3

您是否尝试过以下操作？

div figure {
    color: green;
}
div figure:first-child {
    color: blue;
}

Answer 4

图：第一个孩子将选择父母第一个孩子的所有数字。

在W3C处查看此示例。

Answer 5

使用div figure:first-child选择器。

这是示例

<div>
    <figure>test</figure>
    <p>div 1 pgraph1</p>
    <p>div 1 pgraph1</p>
</div>

<div>    
    <p>div 2 pgraph1</p>
    <figure>test 2</figure>
    <p>div 2 pgraph1</p>
</div>

CSS：

div figure:first-child{
    border:1px solid red;
}

它只会向第一个孩子施加红色边框。

请参阅 fiddle for demo

CSS选择第一个孩子，如果它是某个标签

5 个答案: