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

我刚刚注意到,CSS：first-child和：last-child在同一个元素上使用时不起作用.只有一个被使用.我想知道为什么,如果在CSS中有任何解决方法？看起来像我的CSS bug – 第一个元素也可以是最后一个元素.

我在Google上找不到任何东西.每个教程假定将至少有2个元素.

我正在寻找像：“第一个孩子也是最后一个孩子”选择器.是否存在？

解决方法

I’m wondering why is that and if there is any workaround to that in CSS? It seems like CSS bug to me – first element can be also last element.

这不是一个bug.这是级联如何工作：如果一个元素是第一个孩子和最后一个孩子,那么如果你有：first-child和：last-child在单独的规则中,它们都匹配相同的元素,那么任何在后面声明的或更具体的规则将覆盖另一个.

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

I’m looking for something like: “first child is also last child” selector. Does it exist?

从字面上来说,你会链接这样的伪类,这很好：

:first-child:last-child

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

:only-child

这两个选择器之间的主要区别(实际上是唯一的区别)是特异性：第一个更具体,因为它包含一个额外的伪类.即使在浏览器支持中也没有区别,因为：最后一个孩子和：唯一孩子都受到每个浏览器完全相同的版本的支持.