：影响其他子元素的第一个孩子

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的影响。我只想要父亲.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中存在的第一个元素，无论其类型如何。