Css 在sass中筑巢的麻烦

我知道您可以添加这样的父选择器：

.main-selector {
   .parent-selector & {

   }
}

.main-selector {
   .child-selector {
      *styles*
      .main-selector:hover & {
         *hover styles*
      }
   }
}

我试图找出是否有方法返回到.main选择器，以便向子元素添加悬停状态样式。比如说：

.main-selector {
   .parent-selector & {

   }
}

.main-selector {
   .child-selector {
      *styles*
      .main-selector:hover & {
         *hover styles*
      }
   }
}

---

正确的语法是：

.main-selector {
   .child-selector {
       *styles*
   }
   &:hover {
       *hover styles*
   }
}

这将为

主选择器产生悬停。你可以用另一种方式，像这样：

.main-selector {
    &:hover {
        *hover styles*
    }
    .child-selector {
        *styles*
    }   
  }

等待那么，您希望将鼠标悬停在子元素还是父元素上？在子元素上，但鼠标悬停侦听器将在父元素上。这就是我所担心的。我希望避免子元素有3个样式块（正常、悬停和活动），并希望用正常子元素样式嵌套不同的状态。