CSS :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 伪类非常好用。HTML示意代码如下：

<!-- 1. 只有加载图片 -->
<div class="cs-loading">
   <img src="./loading.png" class="cs-loading-img">
</div>
<!-- 2. 只有加载文字 -->
<div class="cs-loading">
   <p class="cs-loading-p">正在加载中...</p>
</div>
<!-- 3. 加载图片和加载文字同时存在 -->
<div class="cs-loading">
   <img src="./loading.png" class="cs-loading-img">
   <p class="cs-loading-p">正在加载中...</p>
</div>

我们无须在父元素上专门指定额外的类名来控制不同状态的样式，而直接活用 :only- child 伪类就可以让各种状态下的布局良好：

.cs-loading {
   height: 150px;
   position: relative;
   text-align: center;
   /* 与效果无关，截图示意用 */
   border: 1px dotted;
}
/* 图片和文字同时存在时在中间留点间距 */
.cs-loading-img {
   width: 32px; height: 32px;
   margin-top: 45px;
   vertical-align: bottom;
}
.cs-loading-p {
   margin: .5em 0 0;
   color: gray;
}
/* 当只有图片的时候居中绝对定位 */
.cs-loading-img:only-child {
   position: absolute;
   left: 0; right: 0; top: 0; bottom: 0;
   margin: auto;
}
/* 当只有文字的时候行高近似垂直居中 */
.cs-loading-p:only-child {
   margin: 0;
   line-height: 150px;
}

可以得到下图所示的布局效果。