当div元素没有内容时,显示提示内容
2023-08-30 本文已影响0人
洪锦一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div_wrap {
width: 100vw;
height: 100vh;
display: grid;
/* place-items 属性是以下属性的简写：align-items、justify-items */
place-items: center;
}
/* 当div元素没有内容时，.div_wrap:empty样式会生效，同时为了显示一段提示内容，使用了伪元素::before，在content写入提示内容。 */
.div_wrap:empty::before {
content: 'div内容为空';
color: gray;
}
</style>
</head>
<body>
<div class="div_wrap"></div>
</body>
</html>
