CSS 隐藏一个类中的所有元素，除了 IE6 中的第一个元素答案

【问题标题】：CSS hide all elements from a class except for the first one in IE6CSS 隐藏一个类中的所有元素，除了 IE6 中的第一个元素
【发布时间】：2012-03-28 07:30:20
【问题描述】：

我正在寻找一种方法来隐藏特定类的所有元素 - 除了第一个元素。我确实意识到在 javascript 中有一些方法可以做到这一点，但是这个功能适用于那些 没有启用 javascript 的人 - 因此我正在寻找 CSS only 解决方案，如果有的话。

<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 不支持这个伪类，它不会工作。不幸的是，我无法取消对 IE6 的支持（叹气），所以我正在寻找一种方法来实现这一点，而无需使用这个特定的选择器。

谢谢！

【问题讨论】：

我会小心地寻求一个已知缺陷的解决方案（IE6 不支持 :first-child 以及无数其他有用的东西），这可能会从本质上增加大量开销（库、替代setup 等），当一个简单的专用类可以实现相同的效果时。 jQuery 可以help in it's own way，但如果你不需要 jQuery，那将是一笔不小的开销。
我完全同意你的看法，但是，我正在努力确保禁用 javascript 的 IE6 用户的最佳用户体验（耶克，它会变得更糟吗？）。有人可能会说这将是一项不可能完成的任务.. :-D。感谢您的意见！

标签： css internet-explorer css-selectors

【解决方案1】：

使用与 fallback 相同样式的类。因为我不确定 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>

【讨论】：

会更喜欢不需要额外类的解决方案，但我认为因为我正在处理 IE6，这只是一个梦想。非常感谢您的回答！
您需要将规则分成两部分，因为 IE（以及其他非错误浏览器，如 IE7 和 WebKit）应该忽略包含无法识别的选择器的整个规则。但是您也可以完全放弃 :first-child 选择器并使用该类。
我同意@BoltClock，任何解决方案在参考最简单的即时修复时都可能过于臃肿。
考虑到我的选择，这是迄今为止最好的解决方案。再次感谢大家！

【解决方案2】：

我能想到的就这些了……

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

【讨论】：

最少最好的解决方案。是的，只有在绝对没有其他方法的情况下才请。 :) 另外，我认为这并不能真正解决真正的问题（我认为 OP 也不需要更多标记）。
IE6 让我们都忘记了自己的道德并请求宽恕我们的罪过，所以可以肯定，它“是”一种方法，但不是。有人需要按下这只老野兽的“自毁”按钮。
@JaredFarrish 我认为有人需要完全点击 IE 上的“自毁”按钮。 IE10 预计将于 3 月 14 日星期三 2012 发布，它可能是第一个与 Firefox 4 相当的 IE，后者于 3 月 22 日星期二发布 2011
市场决定；例如，据我了解，由于 Windows XP 盗版猖獗，中国仍有不少用户卡在 IE6 上。就个人而言，我不介意，但我觉得在这方面我可能很幸运。
如果它看起来很现代，在 IE6 中肯定看起来很糟糕；这只是它是否可用的问题。它有好几次让我的山羊（最臭名昭着的comma of death 让我的非编程同事认为我已经破解了），所以我只是在它是一个证明你的勇气的有价值的竞争对手的意义上感到渴望。 ..:D

【解决方案3】：

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

【讨论】：