css - :first-child affecting other child elements

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; }

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

你的第二个解决方案:

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

变成这条规则:

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

这只会影响 .buttons 本身，并且仅当它是其父级中的 :first-child 时。

我认为您正在寻找的是:

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

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