使用"&“(与号)运算符，其中最顶层的父项是元素标签选择器

Question

我有更少的东西：

较少

custom-component {
  .random-class {
    .decorator-class& wrapper {
      ...
    }
  }

这就产生了

CSS

.decorator-classcustom-component .random-class wrapper {
  ...
}

它输出的是胡言乱语，因为没有这样的类.decorator-classcustom-component。这是因为最上面的父选择器是一个HTML元素标签，而不是类或其他选择器类型。

有没有办法让与号(.decorator-class)之前的字符连接到最上面的父选择器的右侧？如下所示：

custom-component.decorator-class .random-class wrapper

请注意，尝试，

custom-component {
  .random-class {
    &.decorator-class wrapper {
//  ^ ampersand at the beginning of selector
      ...
    }
  }

会投降，

custom-component .random-class.decorator-class wrapper

Answer 1

我发现在这样的情况下将CSS选择器翻译成英语进行调试是非常有用的。您所需的选择器custom-component.decorator-class .random-class wrapper将转换为：

在具有类random-class的元素中选择wrapper元素，在具有类.decorator-class的custom-component元素中选择元素。

如果这就是你的意思，那么你需要这样的东西：

custom-component {
  &.decorator-class {
    .random-class wrapper {
      ...
    }
  }