#书摘 #css #前端
《CSS 选择器世界》empty伪类
先来了解一下 :empty 伪类的基本匹配特性。
1. :empty 伪类用来匹配空标签元素。例如：

<div class="cs-empty"></div>

.cs-empty:empty {

width: 120px;

padding: 20px;

border: 10px dashed;
}​​


此时，:empty伪类会匹配 <div> 元素，呈现为虚线框。

2. :empty伪类还可以匹配前后闭合的替换元素，如 <button> 元素和 <textarea> 元素。例如：


<textarea></textarea>
textarea:empty {

border: 6px double deepskyblue;

}​​


在所有浏览器下都呈现为双实线

3. :empty伪类还可以匹配非闭合元素，如 <input> 元素、`<img>` 元素和 <hr> 元素等。但实际开发中很少有需要使用:empty伪类匹配非闭合元素的场景。

4. :empty伪类可以匹配什么样的元素？如果没有深入研究，你大概会认为:empty伪类可以匹配没有任何子元素、不显示任何内容的元素。但如果深入细节，就会发现这其中存在误解。
- :empty伪类与空格
如果元素内有注释，:empty伪类是否可以匹配？多数人会觉得不匹配，这是完全正确的。例如：

<!-- 无法匹配:empty伪类 -->

<div class="cs-empty"><!-- 注释 --></div>​​


但如果元素内有一个空格或者标签内有换行符呢？实际上，:empty伪类依然无法匹配。例如，有以下两种情况。
- 不能有空格：


<!-- 无法匹配:empty伪类 -->
<div class="cs-empty"> </div>​​


- 不能有换行符：


<!-- 无法匹配:empty伪类 -->
<div class="cs-empty">
</div>​​


因此，实际开发的时候，如果遇到:empty伪类匹配无效的场景，要仔细查看HTML代码，看看标签内是否有空格或者换行符。尤其是使用一些渲染模板的时候，明明没有任何列表内容，但:empty伪类就是无法匹配，这可能是换行符或者空格导致的。不过根据具体实践，一些流行的开发框架（如Vue等）会自动去除空格，这有利于在实际项目中灵活使用:empty伪类。
:empty伪类忽略空格的特性不符合我们的直观认知，W3C官方也收集到了很多这样的意见，所以**在CSS选择器Level 4规范中已经开始明确:empty伪类可以匹配只有空格文本节点的元素**，但是直到撰写本章的时候还没有任何浏览器支持。因此，为安全起见，实际开发中大家还是按照无空格标准来进行。

https://memo.cosine.ren/m/348