CSS :empty 选择器
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我们经常需要设置包含内容的元素的样式。但如果一个元素没有任何子元素或文本呢？很简单，你可以使用:empty选择器🤩
<p> </p><!-- NOT empty: note the blank space -->
<p></p><!-- YES empty: nothing inbetween -->
p::before {
font-family: "FontAwesome";
content: "\f240";
}
p:empty::before {
content: "\f244";
}
p {
color: silver;
}
p:empty {
color: red;
}
什么才算空？
我第一次遇到这个问题时，对于这个属性如何定义“空”存在一些困惑。我们这里就采用MDN 的定义吧：
CSS 伪类 `:empty` 表示任何没有子元素的元素。子元素可以是元素节点或文本（包括空格）。注释、处理指令和 CSS 内容不会影响元素是否被视为空元素。
为空
只要没有空格，它就是一个空元素。
<p></p>
注释之间的部分也被视为空元素，只要没有空格即可。
<p><!-- comment --></p>
不为空
空格不被视为空字符。即使是换行符，里面也有空格，所以它不是空字符！我特意强调这一点，因为我也犯过同样的错误😅
<p> </p>
<p>
<!-- comment -->
</p>
包含子元素也算作非空元素。
<p><span></span></p>
使用示例:empty
好的，让我们来看一些使用:empty.
使用:empty表单错误消息
正是这个例子让我第一次发现了这个功能:empty。我想在错误信息前添加一个❌图标。但问题是，即使没有错误信息，图标也会出现。不过没关系，我可以用这个功能，:empty只在出现错误信息时才添加图标👍。
CSS
.error:before {
color: red;
content: "\0274c "; /* ❌ icon */
}
HTML
<!-- No error message -->
<div class="error"></div>
<!-- Yes error message -->
<div class="error">Missing Email</div>
输出
没有空
和:empty
:empty在警报中使用
以下是使用:empty隐藏空状态的另一个例子。
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Alert Message</div>
输出
没有空
和:empty
浏览器支持
这项支持真的非常棒。它支持到 Internet Explorer 9 🙌
社区示例
:empty我在尝试为表单中的空白错误信息设置样式时发现了这一点<div class="error"></div>。现在不再需要 JavaScript 了，我可以用纯 CSS 实现 👍
💬 你还知道哪些其他应用场景？
-
@delusioninabox：修复了用户创建内容中空段落标签间距不齐的问题。😅
-
@hkfoster：我用它来消除模板端无法清除的大量随机生成的选择器。👍
-
@sumurai8：移除空段落的内边距
-
@_ottenga：这个通知点很不错（如果为空则不可见，如果包含数字，例如，则会显示为红色，数字显示在圆点内）。
-
@stephenjbell：
li:empty { visibility:hidden; }让空列表项充当列表中间的段落分隔符（没有项目符号）。
社区意见
-
@bourhaouta：关于 :empty 还有一点，它不会选中包含空格的元素，另一方面我们有 :blank，但它的支持还不完善😔
-
@link2twenty：我很高兴看到像这样鲜为人知的功能得到关注！值得注意的是，当 4 级选择器推出时，空白也会被计入其中 🙂。
资源
- MDN Web 文档：
- w3schools：
- CSS技巧：空
- 5 个不太常用的 CSS 选择器
- 空白
- freeCodeCamp：何时使用 :empty 和 :blank CSS 伪选择器
- 为什么空状态需要更多的设计时间
- 共滴：空
感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook |博客| SamanthaMing.com