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

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类来实现此目的：

.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]-->​

要么

<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/