具有多个子嵌套div的CSS选择器

Question

是否可以创建一个CSS选择器来选择每个具有同级且不是最后一个的Child div？

我知道我需要.Parent .A .Child:not(:last-child)之类的东西，但我对如何链接选择器感到困惑，因为它只会给我有兄弟姐妹的孩子。

我已经用//要选择的div标记行。

谢谢

<div class="Parent">
    <div class="A">
        <div class="Child"></div>
    </div>
    <div class="A">
        <div class="Child"></div>//
        <div class="Child"></div>
    </div>
    <div class="A">
        <div class="Child"></div>//
        <div class="Child"></div>//
        <div class="Child"></div>
    </div>
    <div class="A">
        <div class="Child"></div>//
        <div class="Child"></div>//
        <div class="Child"></div>//
        <div class="Child"></div>
    </div>
</div>

Answer 1

.A > .Child:not(:last-child)应该可以。

一个孩子永远是最后一个孩子，所以这就是兄弟姐妹的情况。

.Child {
  height: 20px;
  background: #ddd;
  margin: 2px;
}

.A>.Child:not(:last-child) {
  background: red;
}

<div class="Parent">
  <div class="A">
    <div class="Child">A</div>
  </div>
  <div class="A">
    <div class="Child">A</div>
    <div class="Child">B</div>
  </div>
  <div class="A">
    <div class="Child">A</div>
    <div class="Child">A</div>
    <div class="Child">B</div>
  </div>
  <div class="A">
    <div class="Child">A</div>
    <div class="Child">A</div>
    <div class="Child">A</div>
    <div class="Child">B</div>
  </div>
</div>