如何动态选取父容器内指定序号的p标签，不受其他同级元素干扰

你需要使用CSS的:nth-of-type()伪类实现需求，该伪类仅统计同标签类型的元素顺序，不会被其他类型的标签干扰。

可用CSS代码 #

.parentt > p:nth-of-type(2) {
    border: 1px solid red;
}

原代码失效说明 #

你之前使用的:nth-child(2)是匹配父元素下所有子元素的第2位，不区分标签类型，所以插入h2标签后，第2位子元素变成了h2，自然无法匹配到p标签。
:nth-of-type(2)只会统计父元素下所有p标签的排序，无论中间插入多少其他类型的标签，都会准确命中第二个p元素，无需手动调整序号。

内容的提问来源于stack exchange，提问作者peckoski