6-4 CSS3 结构性伪类选择器—empty
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3 结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格

示例显示:

比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码:

<p>我是一个段落</p>
<p> </p>
<p></p>​

CSS代码:

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​

演示结果:

任务

在CSS编辑器的第五行输入正确代码,给空的div元素添加1px的绿色边框。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>结构性伪类选择器—empty</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div>我这里有内容</div>
  10. <div> <!-- 我这里有一个空格 --></div>
  11. <div></div><!-- 我这里任何内容都没有 -->
  12. </body>
  13. </html>
  1. div {
  2. min-height: 30px;
  3. }
  4.  
  5. div:? {
  6. border: 1px solid green;
  7. }
下一节