隱藏在CSS無標籤元素

Question

<div id="foo"> 
    <a id="bar1">show me</a> 
    hide me 
    <a id="bar2">hide me too</a> 
</div> 

如何使用CSS（display:none;）只具有第一a元素可見？

Answer 1

This won't work：

#foo { 
    display: none 
} 
#bar1 { 
    display: block 
} 

This works，但visibility: hidden有它自己的缺點：

#foo { 
    visibility: hidden 
} 
#bar1 { 
    visibility: visible 
} 

display: inline-block/block貌似是需要作出這個work in IE8。

這是最接近你可以得到不changing your HTML：

HTML：

<div id="foo"> 
    <a id="bar1">show me</a> 
    <span>hide me</span> 
    <a id="bar2">hide me too</a> 
</div> 

CSS：

#foo span, #bar2 { 
    display: none 
} 

Answer 2

你不能，因爲＃bar1是#foo的孩子。如果你想隱藏foo的文本，那麼＃bar1也會被隱藏。

Answer 3

鑑於這種結構，你真的不能這樣做，因爲沒有隱藏容器div就沒有辦法標記「隱藏我」文本。你真的不得不沿着線的東西：

<div id="foo"> 
    <a id="bar1">show me<a> 
    <span>hide me</span> 
    <a id="bar2">hide me too</a> 
    </div> 

Answer 4

您不能成功級聯隱藏除特定的子元素的容器中的所有內容的樣式。

爲了使用類似div#foo:not(#bar1) { display: none; }的東西，您需要在<span />或類似內容中包含「隱藏我」一詞，但即使在那裏，我也不確定您需要支持哪些瀏覽器。

編輯 其實，在第二個想法，你可能會離開，不包裝在span標記文本，如果你可以使用:not()僞類脫身。

Answer 5

還有我發現，讓這兩種方法，第一個：

#foo { 
    font-size: 0; 
} 

#bar1 { 
    font-size: 16px; 
} 

JS Fiddle。

而第二個：

#foo { 
    font-size: 0; 
} 

#foo :first-child { 
    font-size: 16px; 
} 

JS Fiddle。

這些方法幾乎適用於font尺寸爲0，因此它不佔用高度或寬度。然後覆蓋特定元素上的font-size，以顯示指定標籤的文本。這個問題和我不喜歡的原因是，它明確需要固定大小的字體（示例中的16px）來覆蓋0的繼承font-size。儘管如此，後者的例子可能有點過於脆弱，不能被動態生成的標記信任。