嵌套选择器内的与号（父选择器）[重复]答案

【问题标题】：Ampersand (parent selector) inside nested selectors [duplicate]嵌套选择器内的与号（父选择器）[重复]
【发布时间】：2012-07-28 07:39:59
【问题描述】：

这不是记录在案还是不可能？

#parent {
  #child {
    width: 75%;

    .additional_parent_class & {
      width: 50%;
    }
  }
}

这基本上会变成：

.additional_parent_class #parent #child {
  width: 50%;
}

虽然这很有意义，因为与符号的实现及其使用方式有关。如果我试图让它实现这一点怎么办：

#parent.additional_parent_class #child {
  width: 50%;
}

我能够做到这一点的唯一方法是在子声明之外编写另一条规则：

#parent{
  #child {
    width: 75%;
  }

  &.additional_parent_class #child {
    width: 50%;
  }
}

虽然在此实现中这不一定是“麻烦事”，但如果#child 有自己的子代，现在需要在两个规则中复制，这似乎会适得其反。

无论如何，也许我只是挑剔，但如果有更多的方法可以遍历选择器，那就太好了。

【问题讨论】：

标签： css css-selectors sass

【解决方案1】：

虽然目前还不可能，但这个以及对& 语法的许多类似改进计划在 Sass 3.3 中发布。您可以关注 Sass 问题here 上有关该功能的讨论。

【讨论】：

【解决方案2】：

我同意这会很有帮助。不幸的是，目前在 SASS（或我知道的任何其他 CSS 预处理器）中是不可能的。

【讨论】：

【解决方案3】：

这在 v3.4 中可能会在 3.3 中，但不确定。我不是语法的粉丝。 & 更容易。希望有像 &^ 这样的别名:)

#parent {
    #child {
        width: 75%;
        @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
            width: 50%;
        }  
    }
}

【讨论】：