首页 > 编程笔记
CSS :only-child伪类的用法
:only-child 也是一个很给力的伪类,尤其在处理动态数据的时候,可以省去很多 JavaScript 逻辑代码。
我们先来看一下这个伪类的基本含义,:only-child,顾名思义,就是匹配没有任何兄弟元素的元素。
例如,:only-child 伪类可以匹配下面的 <p> 元素,因为其前后没有其他兄弟元素:
尤其需要指出的是,使用 :only-child 的场景是动态场景,也就是对于某个固定的小模块,根据场景的不同,里面可能是一个子元素,也可能是多个子元素,元素个数不同,布局方式就会不同,此时就是 :only-child 伪类大放异彩的时候。
例如,某个正在加载(loading)的模块里面可能只有一张加载图片,也可能仅有一段加载文字,也可能是加载图片和加载文字兼有,此时 :only-child 伪类非常好用。HTML示意代码如下:
图 1 :only-child伪类实现多种状态加载布局
我们先来看一下这个伪类的基本含义,: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伪类实现多种状态加载布局