提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[CSS] Target empty elements using the :empty pseudo-class

CSS The Class Using Target Elements empty
2023-09-14 09:00:53 时间

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;
}

 

相关文章