IE8：用啥代替 nth-of-type(n)？

Posted 2023-03-06

【中文标题】IE8：用啥代替 nth-of-type(n)？

【英文标题】：IE8: what to use in place of nth-of-type(n)?IE8：用什么代替 nth-of-type(n)？

【发布时间】：2012-11-29 12:01:32

【问题描述】：

我继承了以下 CSS 代码来最初隐藏一系列段落和一系列列表项的后面元素。

.profileSection p:nth-of-type(n+2) 
    display: none;


.profileSection li:nth-of-type(n+6) 
    display: none;

显然，此代码在 IE8 中不起作用。隐藏这些元素的替代方法是什么？

【问题讨论】：

我不会说这是一个好习惯，但你可以试试.profileSection li+li+li+li+li+li

太棒了。你会用jQuery吗？

@Pow-Ian：不，它必须是纯 CSS。如有必要，我可以编辑 html，但我宁愿避免这样做。

我同意 EricG 的观点。 Li+Li.... 或为您需要隐藏的项目添加一个特殊的类。

@EricG：这几乎是 CSS3 之前的唯一方法。如果需要 IE8 支持，我认为是 kosher。

【参考方案1】：

下面是关于它的讨论：

http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/

作者提到您可以通过使用引用特定的子元素

tagname + tagname + etc

或者使用

获取通用子级

* + * + etc

我个人只会为这些项目添加一个特殊的类。

【参考方案2】：

+，adjacent sibling selector，将允许您选择所有立即相邻的兄弟姐妹。在您的情况下：.profileSection p+p。 （如果必须这样做，请考虑将其包装在某些东西中以防止其他浏览器看到它，例如 conditional comments。）

但是，如果您的标记包含彼此相邻的 <p> 以外的其他元素，+ 将无济于事。例如：

<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>

如果您在网站上还没有某种 shiv 或 moderizr 功能（这将有助于解决许多其他类似问题），最简单的方法是向元素添加一个特殊类，然后选择使用那个类。

【参考方案3】：

你也可以尝试下载并包含selectivizr，这使得css3选择器可以在IE6-8中工作

【讨论】：

请记住 Selectivizr 不支持 nth-of-type 用于 jQuery。您必须包含另一个库。他们的网站上有一个图表，显示了哪些库支持哪些属性。