You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it‘s solid, easy way to select empty elements without any additional markup.
Be aware that whitespace is considered a "child", so :empty will not work if the element has no children, but has space between the opening and closing tags.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="Alert">
<p>Success! Your profile has been updated.</p>
</div>
<!-- This empty alert box won‘t be show-->
<div class="Alert"></div>
</body>
</html>
.Alert:not(:empty) {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
}
.Alert:empty{
display:none;
}
时间： 2024-10-19 17:23:04