响应式网站中，能否让Hide类隐藏区块内的Visible类元素显示？

首先修正你示例代码里的语法错误：<span class="Visible"> 缺少闭合引号，不修正的话样式不会生效。

然后用以下CSS实现需求：

/* 隐藏Hide容器内的所有内容（包括文本节点） */
.Hide {
  visibility: hidden;
}

/* 让Visible类元素保持可见 */
.Hide .Visible {
  visibility: visible;
  /* 可选：如果希望该元素不占用原容器的位置，添加以下样式 */
  position: absolute;
}

原理说明： #

• visibility: hidden 会隐藏元素及其内容，但元素仍会占据页面空间，且子元素可以通过设置 visibility: visible 覆盖这个属性，这正好满足你的需求。
• 如果你用 display: none 给 .Hide 设置样式，容器及其所有子元素都会被完全隐藏，无法单独显示子元素，所以不适用。

如果不需要保留原容器的占位，可以给 .Visible 加上 position: absolute，让它脱离文档流，自由定位。

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