Css 使：第一个子项忽略嵌套结构？

我需要如何更改选择器，使其仅选择第一段？谢谢

<div class="cont">
    <span>
        <p>first</p>
    </span>
     <span>
        <p>second</p>
    </span>
     <span>
        <p>thrid</p>
    </span>
</div>

.cont p {
    color: green;
}
.cont p:first-child {
    color: red;
}

首先

第二

第三

.续{
颜色：绿色；
}
续：第一个孩子{
颜色：红色；
}

我建议：

.cont div:first-of-type p, /* or the following */
.cont div:first-child p {
    color: red;
}

请注意，我已将

span

元素更改为

div

元素，因为

p

不应包含在内联元素中。

请这样使用：

.cont p {
    color: green;
}
.cont span:first-child p {
    color: red;
}

---

100%的工作人员会使用这个吗

.cont p {
    color: green;
}

.cont span:first-child p{
   color:Red;
}

---

选择span作为第一个子项而不是段落为什么在

span

元素中有

p

元素？