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 来完成吗？

.parent > .child:nth-child(1) {
  background: green;
}

.parent > .child:nth-child(2) {
  background: blue;
}

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

Answer 1

使用 div.parent > p.p

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

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>