使用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。