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

Question

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

我在谷歌上找不到任何关于这个主题的内容.每个教程都假定至少有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. 例如：

\n\n

<blockquote>\n  <p>Some text you want to quote</p>\n</blockquote>\n

\n\n

此 CSS 将为该段落添加引号：

\n\n

blockquote{\n  quotes: "\xe2\x80\x9c" "\xe2\x80\x9d" "\xe2\x80\x98" "\xe2\x80\x99";\n}\n\nblockquote p:first-of-type:before{\n  content:open-quote;\n}\n\nblockquote p:last-of-type:after{\n  content:close-quote;\n}\n

\n