是否存在无意义字符实体？如何创建无语义HTML文本节点触发:empty伪类

首先得明确你的核心诉求：给空的<td>/<th>塞一个看不见、没语义的文本节点，让这些元素不再匹配:empty伪类（毕竟:empty只认完全没子节点的元素，哪怕是个空白字符都能打破它），同时又不能干扰页面布局和语义逻辑。

先说说你用的​（零宽空格）到底合不合适？ #

答案是非常合适！零宽空格（ZWSP）简直是为这个场景量身定做的：

• 视觉上：完全不可见，不会占用任何页面空间，元素的布局、外观跟空的时候一模一样
• 语义上：它属于纯格式控制字符，没有任何实际语义，屏幕阅读器也不会读取它，不会给辅助工具添乱
• 功能上：它是正经的文本节点，只要元素里有它，就会跳出:empty的匹配范围，完美触发你写的td[data-value]:not(:empty)规则

你提到的​就是它的实体名称，和​（十六进制）、​（十进制）是完全等价的，怎么用都行。

有没有其他“完全无意义”的字符实体可选？ #

还有几个同类型的不可见控制字符可以考虑：

• 零宽非断空格（ZWNBSP）：实体名&ZeroWidthNoBreakSpace;，十六进制，十进制——和ZWSP几乎一样，也是看不见、不占空间，唯一区别是它不会作为换行点，不过对你的需求来说没差
• 软连字符（Soft Hyphen）：实体名­，十六进制­，十进制­——正常状态下不可见，只有单词需要换行时才会显示连字符，但它的语义是用于换行控制，相比之下ZWSP的“无意义”属性更纯粹，更贴合你的需求

能不能用HTML标记直接创建无语义的文本节点？ #

其实HTML里没有专门用来生成“无语义文本节点”的标记，因为文本节点本身就是直接的字符内容。不过可以聊聊几个思路：

• 用空<span>？不行，<span>是元素节点不是文本节点，虽然<td><span></span></td>确实不会匹配:empty，但多了个无用元素，不如直接放字符简洁
• 用注释？更不行，CSS的:empty规则根本不认注释，元素里有注释还是会被判定为空

所以最简洁、最符合需求的方案，还是用零宽空格这类无意义的不可见字符作为文本节点。

最后验证下你的代码逻辑 #

你的CSS是通过::after伪元素把data-value的内容渲染出来，然后给非空的<td>加粉色字体——那些塞了零宽空格的<td>会触发td[data-value]:not(:empty)显示粉色，空的<td>（比如Susanne那行的female列）就不会，完全符合你的预期。

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