css - 获取根选择器，并将其用作另一个选择器的一部分 - 在 Stylus 中

Question

我想弄清楚一件让我烦恼了一段时间的小事。

我希望下面代码中的底部选择器重新使用根选择器，因此该选择器的行为与其上方的工作选择器相同。

.page
    position relative


    &__content
        scroll()
        overflow auto


    &--home // working
        .page__content
            margin 30px


    &--home // not working
        & ~/__content
            margin 30px

我知道我可以在 __content block 中使用 ~/选择器，但我宁愿不这样做 - 如果可能的话。

Answer 1

您只能在选择器的开头使用 ~/(initial reference) 但还有另一种方法可以使用 partial reference ^[N]:

手写笔:

.page
    position relative
    &__content
        scroll()
        overflow auto
    &--home 
       & ^[0]__content
            margin 30px

输出:

.page {
  position: relative;
}
.page__content {
  overflow: auto;
}
.page--home .page__content {
  margin: 30px;
}