使用CSS隐藏非锚元素

Question

我有一个看起来像这样的容器

<div id="container">This container has a <a href="#">link</a> in it</div>

除了链接，我想隐藏其中的所有内容。

我试过

#container {display:none;} 
#container a { display:block; }

但这不起作用。

这是一种用户风格，所以我只能访问CSS。没有Javascript。没有标记。

Answer 1

使用您当前使用的代码是不可能的。因为文本片段是仅由anonymous inline boxes表示的文本节点，无法单独使用display进行样式设置。

但是如果你把a元素周围的文字放在元素中，例如span S：

<div id="container"><span>This container has a </span><a href="#">link</a><span> in it</span></div>

然后你可以这样做：

#container span { display: none; }
#container a { display: block; }

Answer 2

如果您不介意仍然占用空间的不可见的非链接文本，则使用visibility将在此处工作。

#container {
 visibility: hidden;  
}
#container a {
 visibility:visible;  
}

如果您确实需要模仿显示块样式，可以尝试：

#container {
 visibility: hidden;   
 position: relative;
}
#container a {
 visibility:visible;  
 position: absolute;
 top: 0;
 left: 0;
}