内嵌套父选择器&：悬停
内嵌套父选择器&：悬停
提问于 2015-01-28 07:39:00
我使用较少的父选择器来缩短选择器：
.module-name {
// styles go here
&__sub-module-1 {
//styles go here
}
}现在，我的问题是如何继续使用父选择器在嵌套的:悬停语句中添加模块名。例如，在子模块-1的悬停时，我想在子模块-2中更改某些内容。在&:hover语句中，父选择器引用什么？
.module-name {
&__sub-module1 {
&:hover {
&__sub-module2 {
// on hover of .module-name__sub-module1 change something in .module-name__sub-module2
}
}
}
}如果我这样写它，它就能工作，但它不符合使用父选择器自动填写模块名称的目的：
.module-name {
&__sub-module1 {
&:hover {
.module-name__sub-module2 {
// on hover of .module-name__sub-module1 change something in .module-name__sub-module2
}
}
}
}我希望我能充分表达我的问题，任何帮助都是值得感激的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-01-28 07:49:36
父选择器(&)将始终根据您所处的级别引用完整的父级。例如，在嵌套的第一层，&指的是.module-name。在第二层，它指的是.module-name__sub-module1，在第三层，它指的是.module-name__sub-module1:hover。
从Less网站摘录：注意到
&代表了所有父选择器(不仅仅是最近的祖先或整个根祖先)
上述声明的重点部分是我根据上下文所包含的内容。
对于这种特殊情况，您可以将module-name赋值给一个变量，并使用下面这样的选择器内插来形成选择器。
与父选择器(&)不同，变量值永远不会改变，无论您有多少级别的嵌套，以及您正在使用的嵌套级别。
@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;
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28186972
复制相关文章
相似问题
腾讯云开发者
