css - :first-child 影响其他子元素

Question

我的 SASS 文件中有这个：

.buttons {
    :first-child {
        padding-top:7px;
    }
}

HTML：

<div class="buttons">
  <div>
    <label>
      <input type="checkbox">
      bla blaa
    </label>
  </div>
  <div>
    <a class="advance">Step2</a>
    <button class="btn">help <i class="arrow"></i></button>
  </div>
</div>

但是，箭头子项正受到 的影响padding。我只想要 parent 里面的第一个孩子.button。

我也试过这个：

.buttons {
    &:first-child {
        padding-top:5px;
    }
}

Answer 1

您的第一个解决方案：

.buttons {
    :first-child {
        padding-top: 7px;
    }
 }

基本上变成了这个规则：

.buttons *:first-child { padding-top: 7px; }

这将产生您所描述的效果 -:first-child层次结构中的每个.buttons人都会受到影响。

您的第二个解决方案：

.buttons {
    &:first-child {
        padding-top: 5px;
    }
}

变成这条规则：

.buttons:first-child { padding-top: 5px; }

这只会影响.buttons它自己，并且只有当它是:first-child它的父对象时。

我认为您正在寻找的是：

.buttons > *:first-child { padding-top: 5px; }

这将影响存在于 中的第一个元素，无论其类型如何.buttons。