使用Sass的嵌套伪选择器

Question

我的HTML看起来像

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="header"></div>
        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

        <div class="feature-bullet">
          <div class="feature-icon"></div>
        </div>

      </div>
    </div>
  </div>

这是一个圆形的项目符号点列表，其中带有象形文字图标。 尽管您无法确定我的发布方式：

<div class="feature-bullet">
   <div class="feature-icon"></div>
</div>

由单个Rails局部渲染了四次，因此我不能在某些项目符号上添加额外的类来更改其属性。

无论出于什么原因，顶部两个项目符号点内的feature-icon都偏离中心，我想使用CSS伪选择器进行选择，并为其提供更多的余量。 因此，我需要做的是获取modal-content的第二个和第三div.feature-icon并选择它们的每个div.feature-icon然后在它们上添加margin属性。

我的初始非工作.scss是：

.modal-content {
  &:nth-child(2), &:nth-child(3) {
    .feature-icon {
      margin-left: 10px;
    }
  }
}

但是我很快意识到

1. 我真的不了解使用这些nth-child伪选择器的规则，
2. 我特别不知道将其他嵌套在Sass选择器中时还有哪些其他因素在起作用。

那有可能吗？ 如果是这样，我有什么选择。 另外，如果有关于此类问题的任何好的文档，我也很乐意看到它，但找不到。

Answer 1

如果您不了解选择器的规则，那么您是从哪里获得CSS的呢？ 只是好奇。

a。）规则是说，对于第二个和第三个.modal-content，如果存在一个.feature-icon，则在其左边上留10px的空白。

b。）嵌套时，这些选择器仅在那些实例中起作用。 如果您使用.yellowBox类而不是.modal-content来声明另一个.feature-icon，它将不会获得左边距。 嵌套可以加快样式，并提供样式结构，但是使选择器在嵌套过程中变得更具体。

编辑：经过进一步审查，将只有一个.modal-content，您可能想要这样：

.modal-content {
    .feature-bullet {
         &:nth-child(2), &:nth-child(3){
           .feature-icon{
              margin-left: 10px;
      }
    }
  }
}

您现在拥有SASS的方式是，寻找第二和第三.modal-content，但是模态只有一个。 相反，您要查找第二个和第三个.feature-bullet，然后将边距应用于其中的.feature-icon。