利用CSS :not()和:empty排除有内容元素

• :empty 的严格定义：无任何子节点，且文本节点不能仅由空白符（U+0020, U+0009, U+000A, U+000C, U+000D）组成。
• HTML解析器的角色：源码中的换行和缩进会被解析器转换为文本节点，因此
  是空的，而
  \n
  不是。
• 选择器的局限性：:not(:empty) 无法进一步过滤掉那些“仅包含空白符”的元素。CSS目前缺乏类似 :blank 或 :has-text 的原生伪类来完成这个任务。

排除视觉上空元素：JavaScript 配合更有效

更进一步，CSS的选择器逻辑是基于DOM结构，而非视觉渲染。这意味着，一个设置了 display: none 但内部有文本的元素，或者一个包含 visibility: hidden 子元素的容器，它们都不算 :empty，但用户根本看不到它们的内容。当需求是“筛选出真正对用户可见的非空元素”时，纯CSS就力不从心了，必须借助JavaScript进行语义化判断。

实际操作中，可以遵循以下思路：

• 判断有效文本：使用 element.innerText.trim() !== ''。这个方法会自动忽略隐藏元素和样式的影响，只关心最终渲染出的文本内容是否为空。
• 排除不可见容器：结合 getComputedStyle(element).display !== 'none' && element.offsetWidth > 0 来确保元素在页面上是实际占据空间的。
• 动态监听策略：如果需要实时响应内容变化，应避免使用已废弃的 DOMSubtreeModified 事件。推荐使用 MutationObserver API，通过配置 childList 和 characterData 选项来观察子节点和文本内容的变更。
• 实践示例：为所有真正有内容的 .item 元素添加一个类名，可以这样实现：

  const observer = new MutationObserver(() => {
    document.querySelectorAll('.item').forEach(el => {
      el.classList.toggle('has-content', el.innerText.trim() !== '');
    });
  });

:not() 嵌套与伪类组合的兼容性陷阱

使用 :not() 伪类时，另一个需要注意的细节是它的语法和浏览器兼容性。:not() 只接受简单选择器作为参数。这意味着你不能写成 :not(:empty, :hidden) 或 :not(div:empty) 这样的复合形式，否则整条CSS规则可能会被浏览器直接忽略。

• 错误写法：div:not(:empty, [data-status="pending"]) → 语法错误，规则失效。
• 正确写法：采用链式调用，如 div:not(:empty):not([data-status="pending"])。这种方式在Chrome和Firefox中表现良好，且满足大多数现代开发需求。
• 兼容性警告：需要注意的是，Safari 15.4及更早版本对链式 :not() 伪类组合的支持可能不稳定。对于包含 :has() 这类较新或实验性特性的复杂组合（如 :not(:empty):has(*)），在Safari中更容易出现失效问题。
• 备选方案：在兼容性要求极高的场景下，可以考虑使用两个独立的CSS规则进行覆盖，或者更稳妥地，使用JavaScript动态添加或移除类名来控制样式。

用 :empty 做“占位提示”比 :not(:empty) 更可靠

有时候，换个思路问题会变得更简单。与其费尽心思用 :not(:empty) 去选中非空元素并施加样式，不如反过来思考：利用 :empty 伪类直接为空元素定义特定的“占位样式”。非空元素则自然继承默认样式。这种方法逻辑清晰，兼容性更好，也完全绕开了空白符的干扰问题。

• 经典案例：表格空单元格提示

  td {
    color: #333; /* 默认样式 */
  }
  td:empty::before {
    content: "/"; /* 为空时添加斜杠 */
    color: #999;
    font-style: italic;
  }

• 处理顽固空白：如果确实需要严格区分“完全空”和“仅含空白”，可以在JavaScript层先对DOM进行清理：el.textContent = el.textContent.replace(/^\s+|\s+$/g, '')，之后再依靠 :empty 进行判断。
• 服务端优化：在服务端渲染（SSR）场景下，可以在生成HTML时，就为空元素添加一个如 data-empty="true" 的属性。这样前端可以直接基于属性选择器应用样式，彻底避免了客户端因解析空白符而产生的任何不确定性。

总而言之，CSS的 :not(:empty) 看似灵活，实则边界条件模糊。当涉及到需要理解“视觉内容”或“有效内容”的动态筛选逻辑时，最可靠的方案往往是在JavaScript层做一次语义上的清洗与判断——毕竟，不能指望CSS选择器能完全理解“人眼所见的空”。