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

Question

我有问题第一个孩子和最后一个孩子如何使用元素和类？

查看我的example

为此，我有一些问题：

1. 为什么此规则不起作用：

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

2. 然后如何使用类test1更改第一个元素的颜色？

3. 为什么此规则有效，如果与示例1类似：

   p.test1:last-child{
       color: white;
   }
   

Answer 1

  

：first-child CSS伪类表示任何元素   其父母的第一个子元素。

     

：last-child 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：nth-​​of-type（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>

Answer 2

first-child / last-child与父元素有关。在您的示例中，没有p.test-element是其父元素（JsFiddle容器）的第一个子元素。相反，第一个孩子是一个简单的p元素。如果在第一个p元素上设置.test-class，它将变为绿色。