【问题标题】: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。

标签: css internet-explorer-8 css-selectors


【解决方案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>
    

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

      • 请记住 Selectivizr 不支持 nth-of-type 用于 jQuery。您必须包含另一个库。他们的网站上有一个图表,显示了哪些库支持哪些属性。
      猜你喜欢
      • 1970-01-01
      • 2012-03-07
      • 1970-01-01
      • 2012-11-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多