嵌套在手写笔中的父级父级选择器
Parent parent selector nested in stylus
当 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
但到目前为止我无法让它工作;我不确定我需要哪一个。我错过了什么?
据我了解,您要寻找的最终选择器是 .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
添加到嵌套选择器的前面)不会发生。明确添加 &
似乎可以解决这个问题。
当 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
但到目前为止我无法让它工作;我不确定我需要哪一个。我错过了什么?
据我了解,您要寻找的最终选择器是 .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
添加到嵌套选择器的前面)不会发生。明确添加 &
似乎可以解决这个问题。