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编译器将它们视为某种形式移动一级向上命令，因此它实际上与直接在&-image下的.post-news相同。因此，不会发生正常的嵌套行为（即，在嵌套选择器前面添加.post-news:hover）。明确添加&似乎可以解决这个问题。

父母选择器嵌套在手写笔中

1 个答案: