html - 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>

.. 我希望 div 中的两个 s 之间有边距.apple，但橙子 div 中的苹果之间没有边距。.apples15px

我可以：

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

..但这也将边距添加到.apples in .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;
}