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/