css - 在 CSS 中隐藏父元素的内容而不隐藏子元素

Question

我有以下 HTML：

<span class="parent">
    Hello world
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</span>

游戏规则：

• 我想使用 CSS 删除“Hello world”字符串
• 标签<a>应该仍然可见
• 我无法触摸 HTML 代码
• 没有 javascript

所以解决方案就像设置display:none一个<span>围绕“Hello world”字符串的元素。问题是没有这样的<span>，我无法创建一个。

Answer 1

display:none;总是隐藏孩子并覆盖他们的display属性。

您可以尝试visibility改用：

.parent { visibility: hidden;}
.parent a { visibility: visible;}

Answer 2

这是不可能的。这就像你手里拿着一面旗帜，你希望当你坐在一个封闭的盒子里时，仍然有人能看到你手中的旗帜。实现该目标的唯一方法是将孩子从父母身边带走并将他们附加到其他地方。那将是dom-manipulation（javascript）。

编辑：在对可见性属性的技术定义和我想通的行为进行深入研究之后，这个答案是不正确的。 jfrej给出了正确的答案。