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个，并为它们抛出一个边距属性。

我的初级非工作.scss是：

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

但我很快意识到了

我真的不明白首先使用这些nth-child伪选择器的规则和
我特别不知道在Sass选择器中嵌套它们时会有什么其他因素发挥作用。

这可能吗？如果是这样，我有什么选择。如果有关于此类问题的任何好文档，我会有兴趣看到它，但我找不到它。

Answer 1

如果你不理解选择器的规则，你从哪里获得CSS？好奇。

a。）规则是说，对于第2和第3个.modal-content，如果有.feature-icon，则在.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内容，但只有一个用于模态。相反，你想要寻找第二和第三个.feature-bullet，并将边距应用于那些.feature图标。

带Sass的嵌套伪选择器

1 个答案: