#Css篇: p:nth-child--匹配任何类型的父元素下的第n个子元素和p:nth-of-type---匹配同类型子元素中的第n个元素

<section>
    <div>我是一个普通的div标签</div>
    <span>我是一个普通的span标签</span>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

说明

nth-of-type()
该选择器匹配其父元素中指定类型的第 n 个元素。
只计算同一类型（元素标签名相同）的兄弟元素，并按顺序从1开始计数。
示例：.class p:nth-of-type(2) 将选择属于 .class 类的所有元素中的第二个

元素。

nth-child()
该选择器匹配其父元素中第 n 个子元素，不论元素类型是什么。
计算所有类型的兄弟元素，并按顺序从1开始计数。
示例：.class p:nth-child(3) 将选择 .class 类中的第3个子元素，如果这个子元素是

标签，则会被选中。

p:nth-of-type(3)表示父标签下的第3个p元素. 不强制要求第三个一定是p

h1:nth-child(3)表示这个元素要是h1标签，且第三个子元素为h1，是两个必须满足的条件。