如何隐藏<section>内的独立文本而保留可见<div>内容？

你遇到的问题根源在于：CSS选择器只能选中元素节点，没法直接选中<section>里的独立文本节点（就是那段“Text I want hidden”），所以section :not(div)只能隐藏<a>这类元素，对文本节点无效。

下面给你两种可行的CSS方案：

方案一：通过字号控制（推荐） #

这种方法简单直接，通过父元素的字号隐藏文本，再给需要显示的div恢复字号：

section {
  font-size: 0; /* 让所有文本内容不可见 */
}
section div {
  font-size: 16px; /* 恢复div的正常字号，可按需调整大小 */
}
section a {
  display: none; /* 隐藏不需要的a标签 */
}

方案二：通过文本颜色与元素隐藏（保留文本占位） #

如果你需要保留文本原来的占位空间，只是让内容不可见，可以用这种方法：

section {
  color: transparent; /* 让所有文本变透明 */
}
section div {
  color: #000; /* 恢复div的文本颜色 */
}
section a {
  display: none; /* 隐藏a标签 */
}

额外：JavaScript方案（允许用JS时） #

如果可以使用JavaScript，能精准选中并移除目标节点：

const section = document.querySelector('section');
// 遍历section的所有子节点，倒序删除避免索引混乱
for (let i = section.childNodes.length - 1; i >= 0; i--) {
  const node = section.childNodes[i];
  // 只保留div元素，移除其他节点（包括文本节点和a标签）
  if (node.nodeType !== Node.ELEMENT_NODE || node.tagName !== 'DIV') {
    section.removeChild(node);
  }
}

内容的提问来源于stack exchange，提问作者Talk Nerdy To Me