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