选择不同于同一家长的元素的第一个孩子

Question

我可能会错误地使用这种措辞，所以我很抱歉。有没有一种方法可以将CSS定位到元素的第一个子元素，而不是将其他元素分组到同一个父元素中？因此，例如：

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

所以说，我想在第一个“父”的第一个“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 {}