当在同一元素上使用时，CSS first-child和last-child不起作用

Question

我刚注意到CSS :first-child和:last-child在同一元素上使用时不起作用。只使用一个。我想知道为什么会这样，如果在CSS中有任何解决方法？对我来说似乎是CSS错误 - 第一个元素也可以是最后一个元素。

我在Google上找不到关于该主题的任何内容。每个教程都假设至少有2个元素。

我正在寻找类似的东西：“第一个孩子也是最后一个孩子”选择器。它存在吗？

Answer 1

  

我想知道为什么会这样，如果在CSS中有任何解决方法？对我来说似乎是CSS错误 - 第一个元素也可以是最后一个元素。

这不是一个错误。这就是级联的工作原理：如果一个元素既是第一个孩子又是最后一个孩子，那么如果你在单独的规则中有:first-child和:last-child并且它们都匹配相同的元素，然后后面声明的或更具体的规则中的任何内容都将覆盖另一个。

您可以找到此行为here的示例，其中包含border-radius速记属性，以及包含使用组件属性而不是速记的变通方法，以及使用一个单独指定一个单独的规则以下选择器......

  

我正在寻找类似的东西：“第一个孩子也是最后一个孩子”选择器。它存在吗？

从字面上看，你可以将这两个伪类链接起来，效果很好：

:first-child:last-child

但是存在一个特殊的伪类，其行为方式相同：

:only-child

这两个选择器之间的主要区别（实际上，唯一差异）是特异性的：第一个更具体，因为它包含一个额外的伪类。即使在浏览器支持方面也没有区别，因为每个浏览器的完全相同的版本都支持:last-child和:only-child。

Answer 2

我意识到我已经迟到了，但您也可以使用CSS的:first-of-type和:last-of-type。例如：

<blockquote>
  <p>Some text you want to quote</p>
</blockquote>

此CSS将为段落添加引号：

blockquote{
  quotes: "“" "”" "‘" "’";
}

blockquote p:first-of-type:before{
  content:open-quote;
}

blockquote p:last-of-type:after{
  content:close-quote;
}