1

我有这样的SASS代码:

li {
  &:last-child, &.last-child {
    color: red;
  }
}

和 HTML 代码:

<ul>
    <li class="last-child">Hello there!</li>
</ul>

上面的代码在 IE8 中不起作用。我知道 IE8 不支持 :last-child,我为此定义了 .last-child。

当我将 SASS 代码编辑为此:

li {
  &:last-child {
    color: red;
  }

  &.last-child {
    color: red;
  }
}

现在一切正常,但会导致代码重复。

我正在为带有 JS 功能的 IE8 添加 .last-child,但我认为这并不重要。

示例 http://codepen.io/anon/pen/LFGAr

4

1 回答 1

2

这里的问题是您根本无法将不受支持的选择器与受支持的选择器结合起来。浏览器必须删除整个规则。请参阅规范

由于您.last-child使用 JS 添加类,因此最简单的方法可能是使用该类并放弃使用,:last-child原因很简单,IE8 不支持它。如果您想在:last-child以后使用和删除 IE8 支持(如果它成为一个选项),那么您暂时必须忍受代码重复。

于 2013-09-21T19:01:57.110 回答