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

Question

我试图在 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- 下的 &-image 相同新闻。因此，正常的嵌套行为(即将 .post-news:hover 添加到嵌套选择器前面)不会发生。显式添加 & 似乎可以解决此问题。