共计 982 个字符，预计需要花费 3 分钟才能阅读完成。
CSS :only-child伪类选择器用于匹配父元素中的唯一子元素。也就是说，它只会匹配是父元素中唯一子元素的元素。
例如如果有下面的一段 HTML 代码：
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
</article>那么使用 p:only-child 就可以匹配 <article> 元素中的 p 元素。但是如果修改一个 HTML 代码，如下：
<article>
<h1> 标题 </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
</article>那么使用 p:only-child 将不会匹配任何的段落元素。
:only-child伪类选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1)。:first-child:last-child 表示匹配父元素中既是第一个子元素又是最后一个子元素的元素。:nth-child(1):nth-last-child(1)表示匹配父元素中是从上开始计数的第一个子元素，又是从下开始计数的第一个子元素的元素。
示例代码
下面都是有效的 :only-child 规则。
li:only-child {/* */}
span:only-child {/* */}
article:only-child:hover {/* */}
a:only-child::after {/* */}
.product:only-child h1 {/* */}在线演示
下面的例子中有两个无序列表，第一个列表中有三个列表项，第二个列表中只有一个列表项，因此使用 li:only-child 规则只会匹配到第二个列表中的列表项。
第一个列表
- 列表项一
- 列表项二
- 列表项三
第二个列表
- 列表中只有一个列表项
浏览器支持
所有的现代浏览器都支持 :only-child 伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。
相关阅读
正文完
