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

只有当它出现在div的第一个孩子时，我才需要选择一个特定的元素。是否有一个CSS选择器可以处理这种情况？CSS选择第一个孩子，如果它是某个标记

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

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

但我不想选择这一项：

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

我不能改变的HTML，这样我就可以不添加班级。我知道:first-child和:first-of-type选择器，但它们本身并不适合这种情况。我如何才能选择第一个孩子，只有它是一个数字？

来源

2014-10-09 And Finally

'div图：第一child' - http://jsfiddle.net/nvr761d6/ – Anonymous 2014-10-09 07:41:11

'：第一child'符合这种情况下*完美* .. – George 2014-10-09 07:44:45

要选择'figure'是一个div *的第一个孩子*需要'DIV>图：第一child' – Alohci 2014-10-09 08:21:14

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

检查此示例W3C。

来源

2014-10-09 07:41:04

@Tambo你能解释一下为什么错了？他问只有在第一个孩子时才选择figure标签，而我的问题解决了他的问题。我不明白你为什么不同意。 – 2014-10-09 08:48:18

你的回答是错误的。即使您的代码不是第一个孩子，您的代码也会突出显示该数字。去检查它。 – 2014-10-09 08:51:36

我没有看到figure:first-child选择器的任何问题。它将选择<figure>元素只有当它是第一个孩子它的父母。

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

来源

2014-10-09 07:42:12

你可以使用CSS :first-child选择与descendant selector这样的：

的jsfiddle - DEMO

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

OR：与CSS >child selector（由@Alohci的建议）

DEMO

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

来源

2014-10-09 07:42:48 Anonymous

使用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

来源

2014-10-09 07:46:02 Mazzu

你试过以下？

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

来源

2014-10-09 07:46:05 Stefan

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

回答

相关问题