Question

我有多个body类，我在这些页面中隐藏了一个元素。当使用javascript将类添加到页面时，我想显示此元素（假设正文具有这些正文类）。

这工作正常，但我可以重写它以避免重复吗？

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
  }
}

.body-class-a.js-class,
.body-class-b.js-class,
.body-class-c.js-class {
  .element {
    display: block;
  }
}

通常我会这样做。但是，它不起.infscrl-all-shown的效果不高于.body-class-a，它在同一级别上。

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
    .infscrl-all-shown & {
      display: block;
    }
  }
}

Answer 1

看起来您只需要删除.infscrl-all-shown &之间的空格。

这样做，您不再选择后代（因为在类选择器和父选择器&之间删除了空格）。选择器.infscrl-all-shown&将选择.body-*类，而不是类.infscrl-all-shown。

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
    .infscrl-all-shown& {
      display: block;
    }
  }
}

它将输出以下内容：

.body-class-a .element,
.body-class-b .element,
.body-class-c .element {
  display: none;
}
.infscrl-all-shown.body-class-a .element,
.infscrl-all-shown.body-class-b .element,
.infscrl-all-shown.body-class-c .element {
  display: block;
}

在选择范围内使用LESS的链父选择器？

1 个答案: