如何隐藏外层元素文本并显示内层元素文本？CSS实现方法咨询

你的HTML结构如下：

<body>
  <div class="B">
    This is text of class B.
    <div class="A">
      This is text of class A.
    </div>
  </div>
</body>

之前的两种尝试存在明显局限：

• display: none会直接隐藏整个.B容器，内部的.A自然也会被隐藏；
• visibility: hidden仅隐藏元素可见性，但会保留原占位空间，无法实现“完全隐藏”的效果。

以下是两种可行的解决方案：

方案一：文本透明+行高控制 #

通过颜色透明隐藏父元素的文本内容，同时设置行高为0消除占位，再恢复子元素的正常样式：

.B {
  color: transparent; /* 隐藏父元素文本颜色 */
  line-height: 0;     /* 消除父元素文本的占位空间 */
  margin: 0;
  padding: 0;
}

.A {
  color: initial;      /* 恢复子元素默认文本颜色 */
  line-height: 1.5;    /* 恢复子元素正常行高 */
  display: block;
}

方案二：绝对定位脱离父元素约束 #

设置父元素不可见且高度为0以消除占位，同时让子元素通过绝对定位脱离父元素的隐藏范围：

.B {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

.A {
  visibility: visible;
  position: absolute;
}

注意：方案二中子元素使用绝对定位后会脱离正常文档流，若需要和其他元素保持布局关联，可以给.A设置position: relative并调整位置，或根据实际布局需求修改定位属性。

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