使用最后一个子选择器减少CSS [英] less css using last-child selector

问题描述

我正在使用less并尝试获取最后输入，以使 margin-bottom (边距底部)为10px.这是我所拥有的，但是它不起作用，并且未在最后一个输入上应用margin-bottom.有什么想法吗?

I am using less and trying to get the last input to have a margin-bottom of 10px. Here is what I have, but it is not working, and not applying the margin-bottom on the last input. Any ideas why?

input {
  margin-bottom: 0px;

  &:last-child {
    margin-bottom: 10px;
  }
}

和HTML

<form id="auth-form">
  <input id="ember367" class="ember-view ember-text-field" placeholder="Email" type="email" name="email">
  <input id="ember368" class="ember-view ember-text-field" placeholder="Password" type="password" name="password">
  <div class="clear"></div>

  <a class="pull-left forgot-password">Forgot password?</a>
  <button class="pull-right" data-ember-action="1" type="button">Sign In</button>
</form>

推荐答案

您的最后一个input不是最后一个孩子，而是您的button.

Your last input is not the last child — that would be your button.

使用:last-of-type代替，选择最后一个input:

Use :last-of-type instead to select the last input:

input {
  margin-bottom: 0px;

  &:last-of-type {
    margin-bottom: 10px;
  }
}

这篇关于使用最后一个子选择器减少CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！