能否用CSS隐藏h1标签内<span>元素外的文本，仅保留span内容？

当然可以仅通过CSS实现这个需求，以下是几种实用的方案：

方案一：颜色透明法（推荐，不影响布局） #

通过将h1的文本颜色设为透明，再重置span的颜色来显示内容：

<h1>I want to "display:none" this text <span>But keep visible the span content</span></h1>

h1 {
  color: transparent;
}
h1 span {
  color: #000; /* 或者用 inherit 继承父元素原本的文本颜色 */
}

原理：h1内的匿名文本节点会继承透明色，自然隐藏；span单独设置正常颜色，就能正常显示内容，且不会改变原有布局结构。

方案二：字体大小重置法 #

将h1的字体大小设为0，让内部匿名文本消失，再给span恢复正常字体大小：

h1 {
  font-size: 0;
}
h1 span {
  font-size: 2em; /* 根据实际需求设置对应字体大小，比如原h1的字号 */
}

注意：如果h1本身有padding、margin等样式，可能会保留空白占位，需要根据实际情况调整。

方案三：可见性控制法 #

利用visibility属性的特性，父元素隐藏但子元素可以单独显示，不过需要处理占位问题：

h1 {
  visibility: hidden;
}
h1 span {
  visibility: visible;
  position: absolute; /* 脱离文档流，消除h1的占位空白 */
}

原理：visibility:hidden会让元素不可见但保留布局空间，所以给span加绝对定位来脱离原文档流，避免页面出现不必要的空白。

内容的提问来源于stack exchange，提问作者Alvaro Menéndez