CSS链式兄弟选择器？

Question

鉴于html：

  <div class="apples">
    <div class="apple"></div>
    <div class="apple"></div><br>
  </div>
  <div class="oranges">
    <div class="apple"></div>
    <div class="apple"></div>
  </div>

..我想有两个之间的空白.apple在S .apples DIV是15px ，但因为有是在橘子DIV苹果之间没有余量。

我可以做：

.apple + .apple{
    margin-left:15px;
}

..但该保证金增加了.apple以s .oranges为好。

我希望能够做到这样的事情：

.apples > .apple + .apples > .apple{
  margin-left:15px;
}

但是，毫不奇怪，这不起作用。

摆弄： http ： //jsbin.com/ijagoc/1/edit

Answer 1

.apples > .apple + .apple {
    margin-left: 15px;
}

或者您可以执行第一个子选择器以支持多个内部div：

.apples .apple {
    margin-left: 15px;
.apples .apple:first-child {
    margin-left: 0;
}