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

Question

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

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

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

Answer 1

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

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

您可以在此处找到此行为的示例，其中包含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;
}