详细讲解伪类选择器nth-of-type

:nth-of-type属于css3的新增选择器，用起来很方便，所以我们有必要在这里详细说一下。

1.nth-child和nth-of-type的区别

<div class="box">
    <h1>我是第一个h1</h1>
    <p>我是第一个p</p>
    <p>我是第二个p</p>
    <h1>我是第二个h1</h1>
    <p>我是第三个p</p>
    <p>我是第四个p</p>
</div>

我们以这个例子进行说明

当css代码写成这样时

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

结果是

如果当css代码换成这样结果又会是什么样的呢？

h1:nth-child(2){
            color: red;
        }

结果是并不会有元素变红

这是因为:nth-child(2)会首先找父元素的第二个子元素，然后再进行匹配，看第二个子元素是否为指定的元素，如果是，才会进行渲染。

接下来再看一下nth-of-type的用法

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

这时结果为：

如果代码为

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

则结果为

由此可见，nth-of-type(n)的用法并不会受到其他类型的影响，它会去找指定类型的同类元素中指定序号的元素。

2. 参数研究

实际上，不管是nth-child还是nth-of-type中能够传的参数都不只是一个数字而已。
(1)传数字（注意是从1开始哦!!!）
这种用法比较简单，不再赘述
(2)传关键字
可以传的关键字包括odd(奇数)，even（偶数）。
(3)传表达式(an+1)，这时候就是一个循环（这时候n从0开始循环,到3停止）
例如，想让偶数个元素变为红色
可以写成

p:nth-of-type(2n)

奇数个元素变为红色，可以写成

p:nth-of-type(2n+1)