css3选择器----nth-child的一些问题

在w3cschool中看nth-child的时候，看到这样一个案例：

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

我们知道odd表示奇数，even表示偶数，我们第一反应应该是奇数行的p背景颜色是#ff0000，偶数行的p背景颜色是#0000ff，为了方便查看颜色，我把#ff0000改成red,#0000ff改成pink，这样奇数行的p背景颜色是red，偶数行的是pink,但是结果呢？正好相反，

奇数行的是pink，偶数行的是red,开始我还以为是没有加div的原因，加了div>p之后还是这个效果，这时我就去mdn官网查看了一下这个选择器，官网这样解释的，

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，
然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

注意这里的重点时当前元素的兄弟元素，也就是这里的奇数偶数不是相对于所有的p标签，还有p标签的兄弟元素，h1标签也需要算上，我靠，感觉这个选择器好坑啊，要想选择同一类型中的奇数或者偶数标签，选用另一个选择器nth-of-type比较好，

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

/* 在每组兄弟元素中选择第四个 <p> 元素 */
p:nth-of-type(4n) {
  color: lime;
}

但是nth-first-child和nth-last-child选择器还是比较好用的。