SASS - ＆amp;：last-child，＆amp; .last-child不在IE8中工作

Question

我有这样的SASS代码：

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

和HTML代码：

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

上面的代码在IE8中不起作用。我知道IE8不支持：最后一个孩子，我为此定义了.last-child。

当我编辑SASS代码时：

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

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

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

我正在为IE8添加带有JS功能的.last-child，但我认为没关系。

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

Answer 1

此处的问题是您无法将不受支持的选择器与受支持的选择器组合在一起。浏览器已删除整个规则。请参阅spec。

由于您正在使用JS添加.last-child类，因此可能最容易使用该类并放弃使用:last-child，原因很简单，因为它在IE8中不受支持。如果您想使用:last-child并在以后删除IE8支持（如果它成为一个选项），那么您将不得不暂时使用代码重复。