介绍一个比较有趣的css伪类， :empty ，这个伪类会匹配没有内容的元素，作用于该元素，使用 empty 配合 bofore 或者 after 可以打到空元素占位的效果，下面贴了一个实例， 大家可以自行琢磨。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-> :empty</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contents{
font-size: 15px;
}
/* 使用伪类 empty */
.contents:empty{
padding: 20px;
border: 1px dashed;
}
/* 伪类empty 配合伪类before使用 */
.contents:empty::before {
content: '暂无';
color: gray;
}
</style>
</head>
<body>
<div class="contents">this is content </div>
<div class="contents">this is content </div>
<!-- 没有内容的元素，作用于empty -->
<div class="contents"></div>
<div class="contents">this is content </div>
</body>
</html>
其实很好懂， 节点元素没有内容，则 empty 生效，使用场景可以用于布局占位，以及配合 before 可以给占位默认值，在表格中很实用，某条表格数据值为空时，可以使用该伪类给默认值
网友评论