CSS 第一个和最后一个子元素

Question

我在一个 div 中渲染 2 个按钮，并希望一个向左浮动，一个向右浮动。

我假设我可以使用 :first-child 和 last:child 元素，但似乎 :first-child 的 css 运行，然后被 :last-child 标签覆盖

我也试过使用 :nth-child(1) 选择器

这是一个例子:http://www.bootply.com/elg2cP9Usp

编辑:正确的工作代码，谢谢大家:

<div class="container"> 
    <button type="button" class="btn btn-default 1">On</button>
    <button type="button" class="btn btn-default 2">Off</button>
 </div>

/* CSS used here will be applied after bootstrap.css */
.container {
        width: 100%;
        padding 25px 40px;
    }

    .container > .btn {
        min-width: 35%;   
    }

    .container > .btn:first-child {
        float: left;   
    }

    .container > .btn:last-child {
        float: right;   
    }

Answer 1

/* CSS used here will be applied after bootstrap.css */

.container {
  width: 100%;
  padding 25px 40px;
}
.container > .btn {
  min-width: 35%;
}
.btn:first-child {
  float: left;
}
.btn:last-child {
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <button type="button" class="btn btn-default">On</button>
  <button type="button" class="btn btn-default">Off</button>
</div>

错误的方法伙计，瞄准按钮..!!