CSS only-child
我们有首子元素、末子元素和第n个子元素。但如果你是独生子女呢？要知道，并不是每个人都有兄弟姐妹！别担心，CSS 可以帮你解决这个问题🤗。如果你想设置一个没有兄弟姐妹的元素的样式，可以使用 `:only-child` 伪类选择器👩👧
HTML
<ul>
<li>I'm the only child👩👧</li>
</ul>
<ul>
<li>I have siblings👩👧👧</li>
<li>I have siblings👩👧👧</li>
</ul>
CSS
li:only-child {
color: DeepPink;
}
输出
替代方案
或者，您也可以使用其他子选择器来实现这种“唯一子节点”的效果。
使用 :first-child 和 :last-child
这样也会选中独生子女。
li:first-child:last-child {
color: DeepPink;
}
使用 :nth-child 和 :nth-last-child
li:nth-child(1):nth-last-child(1) {
color: DeepPink;
}
有什么区别？
因此，使用替代方案与我们的方案之间的区别:nth-child在于，我们的方案的特异性较低。
如果两条或多条相互冲突的 CSS 规则指向同一个元素，浏览器会遵循一些规则来确定哪条规则最具体，从而生效。
特异性之战⚔️
我们来看一个例子。由于only-child其特异性较低，因此显示的文本颜色将是蓝色。
li:first-child:last-child {
color: blue; /* 👈 This will win */
}
li:only-child {
color: DeepPink;
}
如果我们同时与它们三个对战，规则:first-child:last-child与之前相同:nth-child(1):nth-last-child(1)，即最后出现的那个获胜。在我们的例子中，由于:nth-child(1):nth-last-child(1)最后一个出现，所以出现的文本颜色将是绿色。
li:first-child:last-child {
color: blue;
}
li:nth-child(1):nth-last-child(1) {
color: green; /* 👈 This will win */
}
li:only-child {
color: DeepPink;
}
独生子女 vs 唯一同类型子女
让我们先逐一解释它们：
:only-child仅选择父元素的唯一子元素。也就是说，该父元素下只能有一个子元素。即使元素类型不同，也不会被视为唯一子元素。只能选择一个元素，没有例外！
:only-of-type只有当某个元素是父元素中特定类型元素的唯一子元素时，才会选中该元素。因此，存在其他不同类型的同级元素是可以接受的。
现在我们已经理解了解释，让我们来看一些例子。
例如：独生子女
这里有一个简单的例子。<p>它是父元素的唯一子元素<div>，因此符合条件。
<div>
<p></p> <!-- p:only-child -->
</div>
例如：非独生子女
但现在我们遇到了一个问题。父元素<div>有 2 个子元素。所以如果我们用:only-child父元素作为选择器，则不会选中任何元素。
<!-- ⚠️ p:only-child ➡️ no element selected -->
<div>
<h1></h1>
<p></p>
</div>
示例：仅限类型
但是，如果我们使用 `<T>` :only-of-type，那就没问题了。即使我们的父节点 `<T>`<div>有两个子节点，`<T>`<p>仍然是该特定类型的唯一子节点。在这种情况下，`<T>`<p>是我们所有子节点中唯一的类型。因此，它满足了唯一类型的条件，所以被选中。
<div>
<h1></h1>
<p></p> <!-- p:only-of-type -->
</div>
其他类似的 CSS 伪类
以下是一些其他类似的 CSS 伪类
:first-child和:first-of-type:last-child和:last-of-type:nth-child和:nth-of-type
我在之前的代码笔记里已经讲过了:first-child，:first-of-type往下翻到接近结尾的地方就能看到🤓
浏览器支持
它也得到了相当不错的支持，包括 Internet Explorer！
更新：CSS 选择器 4 中的 only-child
我还想补充一下这个更新。它位于 CSS 选择器 4 级的工作草案中。
匹配的元素不需要有父元素。
所以，这是否意味着独生子女可以没有父母呢？🤔 我不太了解这方面的细节😅。如果你知道这是什么意思，请在评论区留言，让我了解更多。俗话说，分享即关爱🤗
社区意见
-
@EmmiePaivarinta：
:empty也超级实用😊 它只适用于元素没有子元素的情况。 -
@Skateside：事先警告
:empty
<i></i> <!-- empty -->
<i><!-- not empty --></i>
<i><b hidden>not empty</b></i>
<i> </i><!-- not empty (white space)
第一个孩子 vs 独生子女
@yoann_buzenet：为什么我们要用only-child而不是 呢first-child？它们的作用不是一样吗？
@cancrexo：嗯，first-child独生子女并不总是如此😉
@yoann_buzenet：是的，但如果只有一个孩子，first-child也可以，这就是我不明白的地方？
@cancrexo：是的，但它将适用于所有情况:first-child，无论它包含多少元素😊
资源
感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook | Medium |博客