最后一个孩子/第一个孩子是如何工作的？

问题描述：

我有问题如何工作第一个孩子和最后一个孩子与元素和类？最后一个孩子/第一个孩子是如何工作的？

而对于它，我有一些问题：

为什么这个规则不工作：

p.test1:first-child{ 
    color: green; 
}

那么如何改变与类第一个元素的颜色test1？
为什么这个规则，如果工作类似于例子1：
```
p.test1:last-child{ 
    color: white; 
} 
```

你能想到的CSS选择器的优先级相同的：'.test'和'：第一child'是两地分居，同一个“级别”选择，都适用于'p'“平行地”，所以'p.test：first-child'意思是“'p”，它属于'test'类，也是第一个孩子。 – Passerby 2013-05-09 03:18:07

@Passerby谢谢。很好，简短的答案。但是，在我的情况下，如何选择带有'test1'类的第一个元素？ – WooCaSh 2013-05-09 03:21:52

在你的具体情况下，这可以工作：http://jsfiddle.net/Ac9t6/12/（IE> = 9）。但它有一定的局限性。 – Passerby 2013-05-09 03:44:59

答

第一个孩子的CSS伪类代表任何元素，它的父代的第一个子元素是。

最后一个孩子的CSS伪类表示任何元素，它的父元素的最后一个子元素是。

参考文献：

http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child

1-在你的榜样p.test1不是其父的第一个子元素，所以选择不选择任何元素。

2- .test1：第n的式（4）更新，代替4，而不是1，不安静的溶液中，参考号：http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

3-因为它是最后一个子元素其家长。

请注意：在您的示例中的父项是body标记。

实例以供将来参考的问题：

<p>test</p> 
<p>test</p> 
<p>test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p> 
<p class="test1">test</p>

一切都很好，但'.test1：n型（1）'不工作。只有在我写作时才工作。test1：第n个类型（4）'其中第4个元素是第一个类'test1' ...这很奇怪。 – WooCaSh 2013-05-09 03:19:18

'.test1：第n类型（1）'不会做你认为它做的事。请参阅http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107获取解释。 – BoltClock 2013-05-09 03:53:55

@BoltClock谢谢！ – Arbel 2013-05-09 04:02:04

答

第一胎/后的孩子是相对于父元素。在你的例子中没有p.test-element是它的父元素（JsFiddle容器）的第一个子元素。相反，第一个孩子是一个普通的p元素。如果您在第一个p元素上设置.test类，它将变为绿色。

最后一个孩子/第一个孩子是如何工作的？

相关推荐