嵌套在手写笔中的父级父级选择器

Question

当 Stylus 嵌套在伪选择器中时，我试图获取 Stylus 中的父选择器。所以虽然我可以在第一个嵌套中做 &-image，但我似乎无法让它在 &:hover

中工作

.post-news
  &-image
    display: none
  &:hover
    &-image // this isn't working
      display: block

我明白为什么它不起作用，因为 & 不再引用 .post-news。我尝试了此处列出的选择器 http://stylus-lang.com/docs/selectors.html 例如：

../-image
/-image
^[0]-image

但到目前为止我无法让它工作；我不确定我需要哪一个。我错过了什么？

Answer 1

据我了解，您要寻找的最终选择器是 .post-news:hover .post-news-image，如果正确，您可以按照下面的代码片段进行操作。

.post-news
  &-image
    display: none
  &:hover
    & ^[0]-image
      display: block

说到 Stylus，我自己也是初学者，但根据我的理解，^[0]-image 和 ../-image 无法按预期工作的原因是 Stylus 编译器将它们视为一些有点像向上移动一个级别的命令，因此它实际上与直接位于 .post-news 下的 &-image 相同。因此，正常的嵌套行为（即 .post-news:hover 添加到嵌套选择器的前面）不会发生。明确添加 & 似乎可以解决这个问题。

嵌套在手写笔中的父级父级选择器

Parent parent selector nested in stylus

css

stylus