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

Question

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

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

所以说我希望第一个“ parent ”中的第一个“littlekid”类(class)是红色的，而所有其他类(class)都是蓝色的。我已经尝试过 first-child、nth-of-type、nth-child、first-of-type，但似乎都不起作用。他们最终都瞄准了所有的“ child 子”类(class)。我无法为第一个“littlekid”添加额外的类(class)来定位它。这需要用 javascript 完成吗？

Answer 1

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

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

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

如果有多个<div class="littlekid">在每个 parent 中你也可以使用这个:

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