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

Question

我可能措辞不正确，所以我很抱歉。有没有办法使用 CSS 来定位元素的第一个子元素，而不是其他元素，当它们没有分组在同一个父元素中时？例如：

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

所以说我希望第一个“父母”中的第一个“小孩子”班级是红色的，而所有其他班级都是蓝色的。我尝试过第一个孩子、第 n 个类型、第 n 个孩子、第一个类型，但似乎都没有。他们最终都针对所有“小孩子”课程。我无法为第一个“小孩子”添加额外的课程来定位它。这需要用 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 {}