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

Question

我有疑问如何处理元素和类的第一个孩子和最后一个孩子？

看我的例子

为此，我有一些问题：

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

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

2. 那么如何用 class 改变第一个元素的颜色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 -伪

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

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