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

我发现有两种方法允许这样做，第一种：

#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）来覆盖font-size 0的继承{{1}} 。尽管如此，它们都可以工作，但后一个例子可能过于脆弱而无法动态生成标记。

Answer 3

你不能，因为＃bar1是#foo的孩子。如果你想隐藏foo的文本，那么＃bar1也会被隐藏。

Answer 4

鉴于这种结构你真的不能，因为没有办法标记“隐藏我”文本而不隐藏容器div。你真的必须要有以下几点：

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

Answer 5

除了特定子元素之外，您无法成功隐藏隐藏容器内所有内容的样式。

您需要在<span />或类似字词中包含“隐藏我”字样才能使用div#foo:not(#bar1) { display: none; }之类的内容，但即便如此，我也不确定您需要支持哪些浏览器。

修改实际上，在第二个想法中，如果你可以使用:not()伪类，你可能会在没有将文本包装在span标签中的情况下离开。

隐藏CSS中未标记的元素

5 个答案: