Sass 选择器序列不会将 ':hover' 继承为 id

Question

我正在阅读本指南。

转到显示"选择器序列"的部分，它靠近网页的 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

这是因为当它是#fake-links的孩子时，它是扩展.link，而不是扩展#fake-links本身。

在这种情况下，您将得到如下内容：

<div id='#fake-links'>
<a href='#' class='link'>...</a>
</div>

link类的a标签是样式。

如果您希望将a样式应用于#fake-links则可以从 SCSS 的选择器中省略.link：

#fake-links {
@extend a;
}

举个例子：

https://www.sassmeister.com/gist/2df1a3ca4d889201fe3a86e324643c04