Question

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

Answer 1

我认为＆符是Sass功能。来自文档：

有时在其他情况下使用嵌套规则的父选择器很有用比默认方式。例如，您可能想要特别的当选择器悬停在身体上或身体上时的样式元素有一定的类。在这些情况下，您可以明确地使用＆amp;指定父选择器的插入位置字符。

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

编辑：从＆amp; hover：到＆amp;：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;
  }

你可以阅读更多关于＆amp;在这里使用

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

什么'＆amp;'选择器选择？

3 个答案: