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

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.