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