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

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

你可以使用CSS :first-child选择器和后代选择器,如下所示:

JSFiddle - DEMO

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

或者:使用CSS > 子选择器(由@Alohci建议)

DEMO

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