Question

这可能是一个非常简单的答案，但我无法在任何地方找到它。不管怎么说，我可能会错过一个非常基本的CSS规则。

这是我的Sass代码：

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

输出：

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

如果我拉出'＆amp;'，会有什么不同登出？它只是在'h3'和'.some-selctor'之间添加了一个空格。父母和孩子之间这个空间的含义是什么？实际上有什么不同吗？提前谢谢。

Answer 1

显示的&实际上意味着“与此选择器结合/加入”。

h3 {
  &.some-selector {

导致 CSS选择器 h3.some-selector（匹配 H3类的some-selector元素，而

h3 {
  .some-selector {

结果是 CSS选择器 h3 .some-selector（匹配具有some-selector元素的后代的类H3的元素并且，扩大，

h3 {
  h3.some-selector {

会产生 CSS选择器 h3 h3.some-selector。

请参阅：

Answer 2

使用＆amp;符号将应用规则“if”当前元素已应用相应的类。

因此，在您的示例中，&规则（较大的字体大小和底部边距）仅适用于h3也具有类.some-selector的情况。例如：

<h3 class="some-selector"> My heading this is</h3>

如果您删除了&符号，则现在为其子项（您注意到的空间）定义规则。所以这适用于html，例如：

<h3> My heading <span class="some-selector">this is</span></h3>