SASS - &:last-child, &.last-child 在 IE8 中不起作用答案

【问题标题】：SASS - &:last-child, &.last-child not working in IE8SASS - &:last-child, &.last-child 在 IE8 中不起作用
【发布时间】：2013-09-26 23:58:51
【问题描述】：

我有这样的 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

【问题讨论】：

标签： internet-explorer-8 sass css-selectors

【解决方案1】：

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

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

【讨论】：