[英]CSS hide all elements from a class except for the first one in IE6
I'm looking for a way to hide all elements of a particular class - except for the first one. 我正在寻找一种隐藏特定类的所有元素的方法-除了第一个元素。 I do realize that there are ways to do this in javascript, but this functionality would be for those without javascript enabled - hence why I'm looking for a CSS only solution, if there is any.
我确实意识到有很多方法可以在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
I can achieve this by using the first-child
pseduo-class like: 我可以通过使用第
first-child
pseduo类来实现此目的:
.foo:first-child {
display:block;
}
.foo {
display:none;
}
But since IE6 doesn't support this pseduo-class, it won't work. 但是,由于IE6不支持此pseduo类,因此它将不起作用。 Unfortunately, I can't cancel IE6 support (sigh), so I'm looking for a way to achieve this without using this particular selector.
不幸的是,我无法取消对IE6的支持(叹气),因此我正在寻找一种无需使用此特定选择器即可实现此目的的方法。
Thanks! 谢谢!
use a class of the same style as fallback. 使用与后备广告样式相同的类。 since i am unsure if IE6 supports chaining (as far as i know, it doesn't), use a container to indicate.
由于我不确定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>
With the given markup, a CSS solution only for IE6 is impossible. 使用给定的标记,仅针对IE6的CSS解决方案是不可能的。 There is no way to target the first child, only general rule for all descendants.
没有办法针对第一个孩子,只有针对所有后代的一般规则。
This is all I can think of... 这就是我能想到的...
<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>
Example: http://jsfiddle.net/FkCzB/ 示例: http : //jsfiddle.net/FkCzB/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.