css - 使用“&”（与号）运算符，其中最顶层的父元素是元素标签选择器

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

标签： cssless

Answer 1

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

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

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

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