SCSS-第n个孩子作为父母？

Question

如果我有一些看起来像这样的代码：

.my-class {
    :nth-child(2) {
      padding-left: 0;
    }
}

在nth-child(2)是div的地方，我可以然后“定位”另一个包含div类的some-div吗？

我试图做这样的事情：

.my-class {
    :nth-child(2) {
      padding-left: 0;

      .some-div {
        some: style;
      }
    }
}

但是没用。

Answer 1

如果您共享HTML结构，这会有所帮助，但是假设您尝试使用some-div元素的第二个孩子的my-class类的孩子，您的代码应该可以正常工作

此：

.my-class {
  :nth-child(2) {
    padding-left: 0;
    .some-div {
      color:red;
    }
  }
}

将编译为此：

.my-class :nth-child(2) {
  padding-left: 0;
}
.my-class :nth-child(2) .some-div {
  color: red;
}

.my-class :nth-child(2) {
  padding-left: 0;
}
.my-class :nth-child(2) .some-div {
  color: red;
}

<div class="my-class">
  <div>1.</div>
  <div>2.<div class="some-div">2a.</div></div>
</div>

Answer 2

应该可以，首先检查您的父母是否有padding-left: 0-可能不是因为您没有在&:nth-child(2)中使用＆。

现在，您正在生成css .my-class :nth-child(2) .some-div（正在类 my-class 的元素的第二个子元素中寻找类 some-div 的元素）不是.my-class:nth-child(2) .some-div。