'&'选择器选择什么？

Question

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

Answer 1

我相信&符号是Sass功能.来自文档:

引用父选择器:&

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

Answer 2

究竟.在萨斯你可以有这样的东西......

 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 {
    blue;
}

编辑:从&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/referencing-parent-selectors-using-ampersand