隐藏在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。尽管如此，后者的例子可能有点过于脆弱，不能被动态生成的标记信任。