:empty伪类和:only-child伪类

empty MDN 介绍
empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

// html
<div class="empty-content"></div>
<div class="empty-content">
	<p>爱江山更爱美人</p>
</div>

// css
.empty-content:empty{
	height: 30px;	
}
.empty-content:empty:before{
	content: '马帅帅帅'，
	color: grey
}

此时的视图

在日常开发中可能用到占位符 但是通常是空元素，此时使用empty可以很好的节省我们的开发时间
比如

姓名：
年龄：

<label>姓名：</label><span class="empty-content"></span>
<label>年龄：</label><span class="empty-content"></span>

// css
.empty-content:empty:before{
	content: '暂无数据'，
	color: grey
}

姓名：暂无数据
年龄：暂无数据

only-child MDN 介绍

CSS伪类:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点

// html
<div>
	<p class="only">Radioactive</p>
</div>
<div>
	<p class="only">radioactive</p>
	<p class="only">imagine dranons</p>
</div>

// css 
.only:only-child{
	margin: 0;
	line-height: 100px;
	text-align: center;
}

视图

先这样吧 散会散会 干活了