使用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

使用visibility将在这里工作，如果你不介意的无形的，非链接文本仍然占用空间。

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

如果你确实需要模仿显示块的风格，你可以尝试：作为OP不能访问页面

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

Answer 2

这是不可能的，你正在使用的代码。由于文本片段是仅由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; }