如何通过CSS的:not(:empty)选择器实现非空元素的背景显示与动态布局展示？

本文共计904个文字，预计阅读时间需要4分钟。

因为 empty 的定义极其严格：

• 常见错误现象：<div class="card">{{title}}</div> 中 {{title}} 渲染为空字符串，但模板里留了换行或空格，:not(:empty) 仍匹配
• 真实使用场景：服务端渲染或 SSR 模板中，变量插值前后存在不可见空白；Vue/React 的 JSX 中写成 <div>{title}</div> 但 title === ""，JSX 不会移除换行符
• 兼容性影响：所有现代浏览器都支持 :not(:empty)，但语义陷阱比兼容性问题更致命

:not(:empty) 的替代方案：用 JS 控制类名更可靠

纯 CSS 无法判断“视觉上是否为空”，只能靠 JS 做一次轻量检查。核心逻辑是：取 textContent 去空格后判断长度。