Css 在SASS中，在嵌套结构中使用后选择器和时不起作用

我的标记是：

<div class="container marker">
  <div class="parent">
    <div class="child">
      content
    </div>
  </div>
</div>

只要我将子样式嵌套在带有标记类的父样式中，符号（&）规则就不会生效。 但如果我写：

  .parent {
    .child {
      .marker & {
        background: red;
      }
    }
  }

一切似乎都很好。为什么？我错过了什么

代码笔中的示例：

---

因为您的SAS的输出将是：

.marker .container .parent .child {
  background: red;
}

因为您告诉sass输出

.marker&

，这表示这是该链的父级，所以

.container

被视为

.marker

的第一个子级

您需要执行以下操作：

.parent {
  .child {
    .container.marker & {
      background: red;
    }
  }
}

它将输出香草CSS：

.container.marker .parent .child {
  background: red;
}

---

帮助您了解sass输出方式的一个很好的工具是

其他替代方法是使用变量，使用变量将保留原始嵌套

.container {
  $c: &;    // store parent into variable
  .parent {
    .child {      
      #{$c}.marker & {
        background: red;
      }
    }
  }
}

输出：

.container.marker.container.parent.child{
背景：红色；
}

结果应该是什么？你能粘贴你想要的最终CSS吗？你是说符号应该在那里做什么？@panther，我希望子元素在其父元素之一具有marker类时具有背景色。另外，我更希望我可以将其样式嵌套，以便我确定另一个。子元素（比如container2类中的子元素）不会具有这些样式。好的。这是有道理的。我不确定以后我会把marker类放在哪里，所以我希望这没关系。但正如你所说的，css解释对这一点很敏感。

.container {
  $c: &;    // store parent into variable
  .parent {
    .child {      
      #{$c}.marker & {
        background: red;
      }
    }
  }
}