父选择器嵌套在里面&：hover [英] Parent Selector nested inside &:hover

问题描述

我使用Less父选择器缩短我的选择器：

I am using the Less parent selector to shorten my selectors:

.module-name {
 // styles go here
 &__sub-module-1 {
  //styles go here
 }
}

现在我的问题是如何继续使用父选择器在嵌套：hover语句中添加module-name。例如。在子模块-1的悬停我想改变子模块-2中的东西。在&：hover语句中，父选择器引用什么？

Now my problem is how to continue to use the parent selector for adding the module-name inside a nested :hover statement. E.g. on hover of sub-module-1 I want to change something in sub-module-2. Inside the &:hover statement, what does the parent selector refer to?

.module-name {
  &__sub-module1 {
   &:hover {
    &__sub-module2 {
     // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
    }
   }
  }
}

它喜欢这个工作，但它击败使用父选择器自动填写模块的名称的目的：

If i write it like this it works, but it defeats the purpose of using the parent selector to automatically fill in the name of the module:

.module-name {
  &__sub-module1 {
   &:hover {
    .module-name__sub-module2 {
     // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
    }
   }
  }
}

我希望我能够充分表达我的问题;

I hope I could adequately express my problem; any help is appreciated.

推荐答案

父选择器（& ）将始终根据您所处的级别引用完整父级。例如，在第一级嵌套时，& 引用 .module-name 。在第二级，它引用 .module-name__sub-module1 ，在第三级，它引用 .module-name__sub-module1：hover

The parent selector (&) will always refer to the full parent based on the level at which you are. For example at the first level of nesting, & refers to .module-name. In the second level, it refers to .module-name__sub-module1 and in the third level, it refers to .module-name__sub-module1:hover.

从少量网站提取：请注意 & 表示所有父选择器（不仅仅是最近的祖先或整个根祖先）

Extract from Less Website: Note that & represents all parent selectors (not just the nearest ancestor or the overall root ancestor)

在上面的语句中强调的部分是我的上下文。 module-name 到一个变量，并使用下面的选择器插值形成选择器。

For this particular case, you could assign the module-name to a variable and use selector interpolation like below to form the selectors.

不像父选择器（& ），而不考虑你有多少层级的嵌套，以及你使用它的嵌套级别。

The variable value would never change unlike the parent selector (&) irrespective of how many levels of nesting you have and at which level of nesting you are using it.

@module-name: mod-name;
.@{module-name} {
    &__sub-module1 {
        &:hover {
            & .@{module-name}__sub-module2 {
                // on hover of .module-name__sub-module1 change something in .module-name__sub-module2
                color: blue;
            }
        }
    }
}

这篇关于父选择器嵌套在里面&：hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！