微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐