如何隐藏 DIV 元素中的特定文本，同时保持其他内容可见？

自定义元素可见性

在 Web 开发中，管理特定元素的可见性至关重要。当隐藏元素中的某些文本同时保留其其他内容的可见性时，会出现一个常见的挑战。

考虑以下 HTML 结构：

<div>
<p>目标是隐藏文本“Click”关闭”，而不影响 div 或所包含的链接。</p>
<p>幸运的是，CSS 提供了使用“可见性”属性的解决方案。 “visibility”属性允许对元素可见性进行更细粒度的控制：</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

通过设置“visibility：collapse;”在父 div 上，整个元素实际上被隐藏了。然而，“可见性：可见；”子链接上的属性将覆盖父设置，使链接再次可见。结果，仅隐藏了所需的文本。