使用“&”与号运算符，其中最顶层的父级是元素标记选择器

编程问答 2022-04-29

问题描述

我没有这个：

少
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

解决方法

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

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

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

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