首页 > 编程笔记

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;
}
可以得到下图所示的布局效果。


图 1 :only-child伪类实现多种状态加载布局

推荐阅读

副业交流群 关注微信公众号,加入副业交流群,学习变现经验,交流各种打法。