父选择器嵌套在里面&: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屋!