CSS 选择直接子级，但如果在另一个嵌套子级中则不选择

Question

所以，如果这是一个元素的 HTML：

<div class="parent">
    <div class="ignore-me">
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="child">paint me green</p>
    <p class="child">paint me blue</p>
</div>

我怎样才能 ：

1. 选择孩子.child而不是里面的 孩子div.ignore-me？

2. 根据它们的索引顺序分别选择它们。

我尝试混合使用>和:nth-child(n)像这样：

.parent > .child:nth-child(1)

但是，它不起作用！

这只能通过CSS完成吗？

<div class="parent">
    <div class="ignore-me">
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="child">paint me green</p>
    <p class="child">paint me blue</p>
</div>

.parent > .child:nth-child(1)

Answer 1

用 div.parent > p.p

>是子组合子。它只匹配那些与第二个选择器匹配的元素，这些元素是与第一个选择器匹配的元素的直接子元素。

div.parent > p.p {
color:green;
}

<div class="parent">
    <div class="ignore-me">
        <p class="p">don't select me</p>
        <p class="p">don't select me</p>
        <p class="p">don't select me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="p">select me</p>
    <p class="p">select me too</p>
</div>