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

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

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

我正在寻找像:“第一个孩子也是最后一个孩子”选择器.是否存在?@H_403_3@

解决方法

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.@H_403_3@

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

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

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

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

:first-child:last-child

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

:only-child

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

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在'',则表示换行,用''切割。
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...