選擇不同於同一家長的元素的第一個孩子

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 {}