详解css3中的:nth-of-type(n)

该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯

:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。

先来看个简单的例子理解一下上面的意思：

HTML代码如下

<div id="wrap">
    <p>one</p>
    <div>我是div</div>
    <p>two</p>
    <p>three</p>
    <p>four</p>
    <p>five</p>
    <p>six</p>
</div>

css代码如下：

    <style>
        #wrap p:nth-of-type(3) {
            background: red;
        }

        #wrap p:nth-child(3) {
            background: yellow;
        }
    </style>

猜猜结果，变红的是哪个？

首先肯定是p标签里的背景变红，通俗一点理解p:nth-of-type(3)代表的就是，所有兄弟节点中找标签为p的，然后找到的第三个p标签背景为红色

所以，three背景为红咯

注意：不要和:nth-child(n)搞混了，上面的背景变黄的是two，因为，该选择器是找父元素的第三个子元素，如果该子元素为p，则其变为黄色，如果，第三个子元素不是p元素，则没有子元素的背景变为黄色

ok，回到我们今天讨论的重点:nth-of-type(n)

:nth-of-type(n)：n可以是一个数字，一个关键字，或者一个公式。

数字，我就不多说了，注意是从1开始的哦（不是从0）

关键字：可选的有：odd（奇数）、even（偶数）

 #wrap p:nth-of-type(even) {
            background: red;
        }

此时，背景变为红色的就是two、four、six啦

公式：使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

怎么理解呐？

比如像上面的想要让偶数p变为红色背景，那么用公式就是：

#wrap p:nth-of-type(2n) {
            background: red;
        }

效果和上面的一样。

个人还是比较喜欢用公式的，功能真的很强大，比如我们想要让奇数的变红公式就是2n+1喽，想要让3的倍数的变红，公式就是3n啦，依次类推。

哦，说说一下，兼容性

选择器	Chrome	IE	Firefox	Safair	Opera
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

嗯、其实整理完，也很简单啦，希望看完的你也有这样的感觉。