带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>

是由单个轨道部分渲染所有四次因此我不能在某些子弹上抛出额外的类来改变它们的属性.

无论出于何种原因,feature-icon顶部两个子弹点内的偏离中心,我想用CSS伪选择器选择它们并给它们一些额外的余量.所以我需要做的是拿第二个和第三个孩子modal-content并选择他们div.feature-icon的每一个并在他们身上抛出一个边缘属性.

我的初始非工作.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.)嵌套时,这些选择器只能在这些实例中工作.如果你有另一个.feature-icon与.yellowBox类,而不是.modal-content,它将不会得到左边距.嵌套允许更快的样式并提供您的样式结构,但使您的选择器非常具体,嵌套的进一步.

编辑:进一步审查后,只有一个.modal-content,你可能想要这个:

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

你现在拥有SASS的方式,就是寻找第二和第三个.modal-content,但是只有一个用于模态.相反,您希望查找第2和第3个.feature-bullet,并将边距应用于其中的.feature-icon.