Question

我正在阅读guide。

转到显示＆＃34; Selector Sequences＆＃34;的部分，它接近网页的3/4，有以下代码：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

在指南中，它说SCSS代码将转换为此CSS代码：

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

我的问题：为什么第三行中的#fake-links不会成为#fake-links:hover？

Answer 1

这是因为当.link成为#fake-links的孩子时，它正在延长#fake-links，而不会延伸<div id='#fake-links'> <a href='#' class='link'>...</a> </div>。

在这种情况下，你会有类似的东西：

link类的a标记的位置是什么样的。

如果您希望将#fake-links样式应用于.link，则会从SCSS中的选择器中省略#fake-links { @extend a; }：

{{1}}

举个例子：