仅当没有附加内容时才选择 :only-child答案

【问题标题】：select :only-child only if there is no additional content仅当没有附加内容时才选择 :only-child
【发布时间】：2015-02-03 00:30:19
【问题描述】：

有没有办法，使用 css 选择器（无 javascript），仅在 没有其他内容时选择子元素？

我想实现以下目标：

<style>p b:only-child { color: red }</style>
<p><b>this should be red</b></p>
<p><b>this</b> should be not</p>
<p><b>this</b> <i>neither</i></p>

:only-child 选择器适用于第三行，但不适用于第二行。看到这个jsfiddle。

【问题讨论】：

可能有用，虽然看起来很乏味：lea.verou.me/2011/01/…
基本上没有。 CSS 样式化存在的内容，而不是不存在的内容。
@MarcB 我读了那篇文章。 :only-child 实际上是 :first-child:last-child 的简写（或 Lea 所写的 :nth-child(1):nth-last-child(1)）。那行不通:(。我希望@Paulie_D 不对...
奇怪的是，这只是this XY question from earlier today的纯Y版本。我所要做的就是参考我的答案来回答这个问题。

【解决方案1】：

如果您查看规范，在structural pseudo-classes 部分下它说：

选择器引入了结构伪类的概念，以允许基于位于文档树中但不能由其他简单选择器或组合器表示的额外信息进行选择。

计算元素在其父元素的子元素列表中的位置时，不计算独立文本和其他非元素节点。计算元素在其父元素的子元素列表中的位置时，索引编号从 1 开始。

唯一考虑文本节点存在的选择器（对于一个不匹配，很奇怪）是:empty。包括:only-child 在内的所有其他结构伪类都不考虑它们。

【讨论】：