CSS :empty 伪类选择器

2022/08/06 2Mins #CSS

使用 CSS :empty 伪类来增强页面展示效果

兼容性

它的兼容性还是不错的，主流浏览器最低也能兼容到 IE9

Figure Element

HTML 上有一个元素叫 <figure> 它提供了使用 <figcaption> 元素添加标题的能力，在有些情况下，我们希望标题保留为空，或者是这张图本身就没有标题，但这时候会让页面看起来很糟糕。那这个时候就可以使用 :empty 来隐藏它：

1
<figure>
2
  <img src="hello.jpg" />
3
  <figcaption></figcaption>
4
</figure>

1
figcaption {
2
  padding: 1em;
3
  background: #ccc;
4
}
5

6
// 如果元素为空则隐藏它
7
figcaption:empty {
8
  display: none;
9
}

Message

还有就是我们页面中经常会用到的一些提示消息，有时候提示消息会同时包含标题和内容，但有的时候只有标题，而标题和正文之间往往会包含一间隔，在项目中我们可能会去判断内容是否为空，如果为空则不渲染内容元素，这原本需要 JS 来操作，但现在我们使用 :empty 伪类就可以做到。

1
<div class="message">
2
  <h2>提示信息</h2>
3
  <p>这是提示信息内容</p>
4
</div>
5

6
<div class="message">
7
  <h2>是否确定删除?</h2>
8
  <p></p>
9
</div>

1
.message {
2
  border: 1px solid #ccc;
3
  background: #f5f5f5;
4
  border-radius: 5px;
5
  padding: 10px 15px;
6
  margin-bottom: 10px;
7
}
8

9
h2 {
10
  margin: 0;
10 collapsed lines
11
  font-size: 18px;
12
}
13

14
p {
15
  margin: 5px 0 0;
16
}
17

18
p:empty {
19
  display: none
20
}

而且不仅仅可以作用于空元素的本身，还可以利用 css 选择器的能力作用于其他兄弟元素、后代元素等。比如说搭配上 :not() 或是 + 选择器可以实现只有在没有提示内容的时候才出现关闭按钮：

1
<div class="message">
2
  <h2>提示信息</h2>
3
  <p>这是提示信息内容</p>
4
  <button>关闭</button>
5
</div>
6
<div class="message">
7
  <h2>是否确定删除?</h2>
8
  <p></p>
9
  <button>关闭</button>
10
</div>

1
.message {border:1px solid #ccc;background:#f5f5f5;border-radius:5px;padding:10px 15px;margin-bottom:10px}
2
h2 {margin:0;font-size: 18px;}
3
p {margin: 5px 0 0}
4
p:empty {display:none}
5
button {display:none}
6
p:empty + button {display:block}

以上。

回顾上一篇

接下来阅读

Libon

CSS :empty 伪类选择器

ToC

兼容性

Figure Element

Message