sass - '&' 选择器选择什么？

Question

在这个codepen 中有一个 css 选择器&:hover，该选择器匹配什么？

Answer 1

我相信与号是Sass的一个功能。从文档：

引用父选择器：&

有时，以默认方式以外的其他方式使用嵌套规则的父选择器很有用。例如，您可能希望在选择器悬停时或当 body 元素具有特定类时具有特殊样式。在这些情况下，您可以使用 & 字符显式指定父选择器应插入的位置。

Answer 2

确切地。在 Sass 中，你可以有这样的东西......

 div {
    background: green;

    p {
        background: red;

        &:hover {
            background: blue;
        }

        &:active {
           background: blue; 
        }
    }   
}

...当转换为 CSS 时会变成这样：

div {
    background: green;
}

div p {
    background: red;
}

div p:hover {
    background: blue;
}

div p:active {
    background: blue;
}

编辑：从 &hover: 到 &:hover

Answer 3

一种不太广为人知的用法是，您可以将 & 符号添加到样式的末尾，以便父选择器成为子选择器。

例如：

 h3
   font-size: 20px
   margin-bottom: 10px

 .some-parent-selector &
   font-size: 24px
   margin-bottom: 20px

变成，

  h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .some-parent-selector h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

你可以在这里阅读更多关于和使用的信息

http://thesassway.com/intermediate/reference-parent-selectors-using-ampersand