例1(满分MDN Nesting Selector分):
.card {
/* .card styles */
.featured & {
/* .featured .card styles */
}
}
/* the browser parses above nested rules as */
.card {
/* .card styles */
}
.featured .card {
/* .featured .card styles */
}
转换后的版本有一个介于.featured和.card之间的空格字符.
例2(满分MDN Nesting Selector分):
.card {
padding: 0.5rem;
border: 1px solid black;
border-radius: 0.5rem;
& h2 {
/* equivalent to `.card h2` */
color: slateblue;
.featured & {
/* equivalent to `.featured.card h2` */
color: tomato;
}
}
}
在.featured和.card之间没有空格.
w3 doc表示&相当于:is().这与第一个例子是一致的，但第二个例子不是.
我测试过这两个例子，它们都是绝对正确的！
我试着go 掉示例2中&周围的空格.如果我移go 左边的空格，它就不再起作用了.如果我从右边移走，也没什么不同.
使用&时，我找不到多层嵌套 Select 器的任何文档.有人能解释这种行为吗？