使用 :empty 伪类可精准识别子节点数为 0 的真正空元素；通过 Console 执行脚本添加红色轮廓线，或注入 CSS 标记空单元格；对含空格的“逻辑空”元素，需先用脚本标记再样式化。
你想在欧朋浏览器中识别或处理网页里真正为空的内容区域（比如空的 div、span、td），让它们不占位、不显示边框、或加视觉提示，而不是靠肉眼判断“看起来空”。
用 :empty 伪类精准识别完全空白元素
网页中看似空的容器，可能含空格、换行符甚至 HTML 注释——这些都会导致 :empty 失效。只有子节点数为 0 的元素才匹配。
打开开发者工具（Ctrl+Shift+I 或 Cmd+Option+I），切换到 Console 标签页，粘贴并执行以下代码：
【document.querySelectorAll('*:empty').forEach(el => el.style.outline = '2px solid red')】
这会为当前页面所有真正为空的元素加红色轮廓线，一目了然。注意：该操作仅作用于当前页面内存，刷新即消失，不影响网站本身。
在网页中注入自定义 CSS 突出空单元格
适用于表格数据缺失排查场景，比如后台导出的 Excel 渲染成 HTML 表格后，需快速定位空
方法一：通过开发者工具临时注入
按 F12 → Elements → 右键任意 节点 → “Edit as HTML” → 在
内最下方插入：<style>td:empty { background: #ffebee; border: 1px solid #f44336; }</style>
方法二：使用欧朋内置的“样式编辑器”扩展（如已安装 Stylus）
点击地址栏右侧 Stylus 图标 → “编写新样式” → 粘贴上述 td:empty 规则 → 保存并启用。
⚠️ 注意：如果表格单元格里有 或换行符，:empty 不会生效，需先清理 DOM 内容再测试。
批量检测并标记空文本节点（进阶）
有些空值藏在文本节点中，比如 <p></p> 是 :empty，但 <p> </p>（含空格）不是。要捕获这类“逻辑空”，需脚本干预。
第一步：在 Console 中运行清理脚本
复制粘贴以下代码并回车：
Array.from(document.querySelectorAll('*')).filter(el => el.textContent.trim() === '').forEach(el => el.dataset.emptyLike = 'true');
第二步：追加对应 CSS 样式
继续在 Console 中执行：
const style = document.createElement('style'); style.textContent = '[data-empty-like="true"] { outline: 1px dashed orange !important; }'; document.head.appendChild(style);
此时所有“内容去空格后为空”的元素都会带虚线橙色边框。该标记不会修改原始 HTML，只影响当前会话渲染。
