有没有办法指定第一个元素* type *？

我想知道有没有什么办法让CSS的下面的例子工作，因为我打算？有没有办法指定第一个元素* type *？

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.col p:first-child { 
    background:yellow; 
} 
</style> 
</head> 

<body> 
<div class="col"> 
    <h1>Woot</h1> 
    <p>I am a super nun. I am a super nun.</p> 
    <p>I am a super nun. I am a super nun.</p> 
</div> 
</body> 
</html>

基本上我需要一个元素的第一<p>被称呼一定的方式......但first-child如果它的第二个孩子（废话），即使我试图说不行：“第一父亲中的<p>元素（即.col p:first-child）“。

是否可以在CSS中选择不是第一个孩子，而是特定类型的第一个孩子？

来源

2011-05-26 Chuck Le Butt

为什么不使用一般的兄弟选择器作为“div.col〜p” – Jawad 2011-05-26 17:37:36

@ JAA149：因为那会选择多个'p'。 – BoltClock 2011-05-26 17:38:56

比我们可以使用相邻的兄弟选择器作为“h1 + p”。 http://jsfiddle.net/V8LvC/ – Jawad 2011-05-26 17:43:39

幸运的是，对于元素类型，CSS3提供:first-of-type伪类（没有第一个类，第一个伪类，第一个具有某个属性等）。

.col > p:first-of-type

不幸的是，由于它是一个CSS3选择器，浏览器对它的支持很差。在所有IE版本中，只有IE9支持它。

如果.col结构是可预测的（足够的），例如，它总是包含一个元素，后跟一个p，你可以做这样的事情，而不是，只有CSS2选择：

.col > :first-child + p

来源

2011-05-26 17:28:42 BoltClock

太棒了！很高兴听到。现在我只需要看看它的支持情况。 – 2011-05-26 17:29:40

这只会压抑你。 – 2011-05-26 17:31:17

哦，那太好了。我不知道CSS2选择器是如此有用。谢谢！ – 2011-05-26 17:33:36

那将是:first-of-type伪类。

的:first-of-type伪类表示是其在它的父元素的子元素的列表类型的第一个同级元素。

现在我只需要看看它是如何很好的支持。

Here's您正在寻找的quirksmode兼容性表。简短版本：忘记IE < 9.

来源

2011-05-26 17:29:31

+1殴打秒！谢谢，不过。 – 2011-05-26 17:32:23

查看我编辑的浏览器支持。 – 2011-05-26 17:36:54

谢谢，马特。这非常有用。鉴于我的结构是非常可预测的，我可以很高兴地使用CSS2选择器。我不知道这甚至是可能的。 – 2011-05-26 17:38:17

有没有办法指定第一个元素* type *？

回答

相关问题