隐藏父元素的内容，而不会在CSS中隐藏子元素 [英] Hide content of parent element without hiding children in CSS

问题描述

我有以下HTML：

 < span class =parent> 
 Hello world 
< a href =＃>链接1< / a> 
< a href =＃>链接2< / a> 
< / span> 
  

游戏规则：

• 我想使用CSS删除Hello world字符串


• < a>


• 我无法触摸HTML代码


• 没有javascript

所以解决方案就像在< span> 元素周围设置 display：none Hello world字符串。问题是没有这样的< span> ，我不能创建一个。

解决方案

display：none; 始终隐藏儿童并覆盖其显示属性。 b
$ b

您可以尝试改用 visibility ：

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

I have the following HTML:

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

Rules of the game:

• I want to remove the "Hello world" string using CSS
• The <a> tags should still be visible
• I cannot touch the HTML code
• No javascript

So the solution would be like setting display:none on a <span> element surrounding the "Hello world" string only. The problem is that there is no such <span> and I cannot create one.

解决方案

display:none; always hides children and overrides their display properties.

You can try using visibility instead:

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

这篇关于隐藏父元素的内容，而不会在CSS中隐藏子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！