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

【问题标题】：Selecting the first child of an element that are not of the same parent选择不属于同一个父元素的第一个子元素
【发布时间】：2013-03-18 22:52:12
【问题描述】：

我的措辞可能不正确，因此我深表歉意。有没有办法使用 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 完成吗？

【问题讨论】：

标签： css css-selectors

【解决方案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 {}

【讨论】：