Html CSS选择器未按预期运行

在以下简单文档中：

div+p{
颜色：红色；
}

嗨，凯特琳！欢迎来到CSS

+

是相邻的兄弟组合符

---

div

和

p

具有父/子关系（

是子组合子，而空格是子组合子），而不是兄弟/姐妹关系（这将是

）。

div

是父元素，而

p

是子元素

由于元素之间的关系是父子关系，因此必须使用

'>'

或

'

但是请注意，

div>p

只会选择立即

p

子元素，它不会对其他不是

div的直接子元素的
p
元素起作用

就是

.parent>p{color:red；}

只有这样才能工作

<div class="parent">
    <p>this will be in red color</p>
    <div>
        <p>this will NOT be in red color</p>
    </div>
    <p>this will also be in red color</p>
    <div>
        <div>
            <p>this will NOT be in red color</p>
        </div>
    </div>
</div>

<div class="parent">
    <p>this will be in red color</p>
    <div>
        <p>this will also be in red color</p>
    </div>
    <p>this will also be in red color</p>
    <div>
        <div>
            <p>this will also be in red color</p>
        </div>
    </div>
</div>

您似乎需要使用“>”，如
中所述选择子项<代码>~

和

+

选择同级