Question

我正在寻找隐藏特定类的所有元素的方法 - 除了第一个。我确实知道有很多方法可以在javascript中执行此操作，但此功能适用于那些没有启用javascript 的功能 - 因此我为什么要寻找仅CSS 解决方案，如果有的话。

<div class="foo">Content 1</div> //not hidden
<div class="foo">Content 2</div> //hidden
<div class="foo">Content 3</div> //hidden

我可以使用first-child pseduo-class来实现这一点：

.foo:first-child {
    display:block;
}
.foo {
    display:none;
}

但是因为IE6不支持这个pseduo类，所以它不起作用。不幸的是，我无法取消IE6支持（叹气），所以我正在寻找一种方法来实现这一点而不使用这个特定的选择器。

谢谢！

Answer 1

使用与后备相同的类。因为我不确定IE6是否支持链接（据我所知，它没有），使用容器来指示。

/*hide all foo*/
.container .foo {
    display:none;
}

/*as suggested, might as well do this and drop the others altogether*/
.container .first-child { 
    display:block;
}

<div class="container">
    <div class="foo first-child">Content 1</div> //not hidden
    <div class="foo">Content 2</div> //hidden
    <div class="foo">Content 3</div> //hidden
</div>

Answer 2

使用给定的标记，仅针对IE6的CSS解决方案是不可能的。没有办法针对第一个孩子，只针对所有后代的一般规则。

Answer 3

这就是我能想到的......

<div class="foo">Content 1</div>
<!--[if IE 6]><div style="display:none"><![endif]-->
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<!--[if IE 6]></div><![endif]-->

OR

<div class="foo">Content 1</div>
<noscript><div style="display:none"></noscript>
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<noscript></div></noscript>

示例：http://jsfiddle.net/FkCzB/

CSS隐藏了类中除IE6中第一个元素之外的所有元素

3 个答案: