不要只看渲染结果，右键「检查」后展开元素，观察其内部是否有 #text 节点——有就说明存在不可见字符：

• Chrome / Edge：展开元素后，若看到灰色的 #text 节点，里面显示 "\n " 或类似内容，就是问题根源
• Firefox：同样会显示 #text，双击可查看具体内容
• 避免靠肉眼判断“是不是空”，DOM 结构才是唯一依据

替代方案：用 JavaScript 判断“视觉上为空”

当必须响应“无可见内容”的状态时，:empty 不够用，改用 JS 检测更可靠：

立即学习“前端免费学习笔记（深入）”；

function isVisuallyEmpty(el) {
  return !el.textContent.trim();
}

// 应用样式
if (isVisuallyEmpty(document.querySelector('.card'))) {
  document.querySelector('.card').classList.add('empty-visual');
}

关键点：

• textContent 获取所有文本内容（含子元素内的），trim() 清除首尾空白
• 比 innerText 更稳定（不依赖渲染、不触发重排）
• 适合配合 MutationObserver 监听动态内容变化

预防性处理：服务端或构建时压缩 HTML

如果空格/换行来自模板输出（如 PHP、Vue SFC、JSX），优先从源头减少空白：

• Vue：用 v-if 替代条件性渲染空内容，避免留下空标签
• Webpack /

  

  Vite：启用 html-minifier-terser 插件，配置 collapseWhitespace: true
• PHP：用 ob_start() + 正则清理输出（慎用，可能误伤 pre/code）
• 注意：CSS 本身无法“忽略空白”，所以不能指望伪类或属性修复这个问题

真正麻烦的是那些既需要 CSS 响应、又无法控制 HTML 输出的第三方组件——这时候只能用 JS 补位，别硬扛 :empty。