css - Sass选择器序列不会将`:hover`继承给id。

我正在阅读此guide。

转到说“选择器序列”的部分，它在网页的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？

最佳答案

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

在这种情况下，您将遇到以下情况：

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

带有a类的link标记的样式在哪里。

如果要将a样式应用于#fake-links，则应从SCSS中的选择器中省略.link：

#fake-links {
  @extend a;
}

关于css - Sass选择器序列不会将`:hover`继承给id。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47584537/