码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-10-18 07:43:32      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5971925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!