'＆'选择器选择什么？

Question

this codepen有一个css选择器&:hover该选择器匹配什么？

Answer 1

我相信＆符号是Sass功能。从文档：

Referencing Parent Selectors: &

有时它不是默认 的方式来使用嵌套规则的父母选择是非常有用的。例如，您可能希望在选择器悬停时或 元素具有特定类时使用特殊的 样式。在这些情况下，可以明确指定 字符在哪里插入父选择器。

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

编辑：从&悬停：到&：悬停

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