如何使用:empty伪类隐藏空的CSS Grid元素？

你遇到的问题核心是**:empty伪类的匹配规则**：它只会匹配完全没有任何内容的元素——包括不能有换行、空格、制表符这类空白字符。你提供的空Grid元素里有换行和空格，所以浏览器判定它不是“空”的，自然不会应用display: none。

解决方案 #

方案1：清理HTML空白字符

直接把空元素里的换行和空格删掉，写成紧凑格式：

<div class="o-grid o-grid--half"></div>

这种情况下，:empty伪类就能正常匹配，元素会被隐藏。

方案2：用:not(:has(*))适配含空白的场景

如果无法修改HTML结构，改用:has()伪类的取反规则，匹配没有任何子元素的容器（不管内部有没有空白字符）：

.o-grid:not(:has(*)) { display: none; }

这个规则会忽略容器内的空白，只要没有实际的子元素，就会隐藏该Grid容器，完美适配你的需求。

验证效果 #

• 带内容的Grid元素：<div class="o-grid o-grid--half"><div>Content</div><div>Some Content</div></div> 不受影响，正常显示。
• 含空白的空Grid元素：会被上述CSS规则匹配并隐藏，不再占用空间。

内容的提问来源于stack exchange，提问作者Ahmad Ajmi