选择不属于同一父元素的元素的第一个子元素

Question

我可能会错误地写这个，所以我道歉。有没有一种方法可以使用CSS来定位元素的第一个子元素，但是当它们没有被分组在同一个父元素中时，是否有其他方法？例如：

    <div class="parent">
       <div class="littlekid">
    </div>
    <div class="parent">
       <div class="littlekid">
    </div>
    <div class="parent">
       <div class="littlekid">
    </div>

所以说我希望第一个“父母”中的第一个“littlekid”课程为红色，其他所有课程为蓝色。我尝试了第一个孩子，nth-of-type，nth-child，first-of-type，似乎没有人工作。他们最终都瞄准了所有“littlekid”课程。我无法在第一个“littlekid”中添加额外的类来定位它。这需要用javascript完成吗？

Answer 1

假设在其父级中的第一个<div class="parent"></div>之前没有其他元素，您可以使用它：

div.parent > div.littlekid {
    color: blue;
}

div.parent:first-child > div.littlekid {
    color: red;
}

如果每个家长中有多个<div class="littlekid">，您也可以使用此功能：

div.parent:first-child > div.littlekid:first-child {}