为第2个子段落标记应用颜色，但它适用于第一段标记

Question

我将nth-child（2）的颜色红色应用于段落标记，但红色适用于第一个孩子。任何理由我都很困惑

<div>
    <h1>Fox story</h1>
    <p>the fox is lied between the lake</p>
    <p>that is the possible way </p>

</div>

风格

p:nth-child(2){

    color:red;
}

我尝试了Fiddle

Answer 1

尝试nth-of-type

p:nth-of-type(2){  
    color:red;
}

您定位的是第二个孩子，第二个孩子是第一个<p>标签。所以在这里你必须指定type元素而不是child。

Demo

Answer 2

nth-child统计所有孩子，因此H1是第一个，first p是第二个。

改为使用nth-of-type。

Answer 3

在您的情况下，您还可以使用:last-child或p + p（如果您确定段落的数量不会发生变化。否则nth-of-type(2)：）< / p>