#书摘 #css #前端
《CSS 选择器世界》比较实用的子索引伪类
本节要介绍的伪类都是用来匹配子元素的，子元素必须是独立标签的元素，文本节点、注释节点是无法匹配的。
如果想要匹配文字，只有::first-line和::first-letter两个伪元素可以实现，且只有部分CSS属性可以应用，这里不展开介绍。

1. :first-child 伪类和 :last-child 伪类
:first-child 伪类可以匹配第一个子元素，:last-child 伪类可以匹配最后一个子元素。
2. 给力的 :only-child 伪类
:only-child 也是一个很给力的伪类，尤其在处理动态数据的时候，可以省去很多JavaScript逻辑代码。
我们先来看一下这个伪类的基本含义，:only-child，顾名思义，就是匹配没有任何兄弟元素的元素。
例如，:only-child伪类可以匹配下面的 <p> 元素，因为其前后没有其他兄弟元素：

<div class="cs-confirm">
<!-- 可以匹配:only-child伪类 -->
<p class="cs-confirm-p">确定删除该内容？</p>
</div>​​


另外，:only-child 伪类在匹配元素的时候会忽略其前后的文字内容。例如：

<button class="cs-button">
<!-- 可以匹配:only-child伪类 -->
<i class="icon icon-delete"></i>删除
</button>​​


虽然.icon元素后面有“删除”文字，但由于没有标签嵌套，是匿名文本，因此不影响:only-child伪类匹配.icon元素。

尤其需要指出的是，使用:only-child的场景是动态场景，也就是对于某个固定的小模块，根据场景的不同，里面可能是一个子元素，也可能是多个子元素，元素个数不同，布局方式就会不同，此时就是:only-child伪类大放异彩的时候。例如，某个正在加载(loading)的模块里面可能只有一张加载图片，也可能仅有一段加载文字，也可能是加载图片和加载文字兼有，此时:only-child伪类非常好用。

https://memo.cosine.ren/m/350