我在sass/scss
Bootstrap v4文件中找到了这个:
.nav-pills {
.nav-link {
@include border-radius($nav-pills-border-radius);
&.active,
.show > & { /* <-- !!! */
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
}
}
我知道它通常是指&
父(直接)选择器:
.clasePadre {
&.claseHijo {
}
}
相当于.clasePadre.claseHijo
。
那么在这种情况下它是否.show > &
等同于.show > .nav-pills .nav-link
?
即:是否所有父选择器都继承于&
?
是的。
是的。
根据官方文档(英文):
webbooks.es的翻译:
示例
sass/scss
:上面的代码
sass/scss
编译如下:特殊字符
&
总是被父选择器替换,因为它出现在CSS
. 这意味着如果您有嵌套规则,则首先计算整个父选择器,然后替换为&
.示例
sass/scss
:它编译成
CSS
: