网上转摘的似乎都是同一篇文章，难道就是简体中文世界对技术的态度 - “能用就好，何必太认真”。俺老人家较真如下：

p:nth-child(2n+1) 匹配（p的父节点的）奇数个 p标签

p:nth-of-child(2n+1) 匹配（p的父节点的）p标签的 第奇数个

nth-child 先配置序号，nth-of-type 先匹配标签。观察这段 html 代码

<div class="nthExample">
<div>div 块</div>
<div>div 块</div>
<div>div 块</div>
<p>p 段落</p>
<p>p 段落</p>
<div>div 块</div>
<div>div 块</div>
<p>p 段落</p>
<div>div 块</div>
<p>p 段落</p>
<p>p 段落</p>
<p>p 段落</p>
</div>

先用 nth-child(2n+1)

#nthExample-1 p:nth-child(2n+1) {background:#900;color:#fff;}

效果如下：

意思是：#nthExample-1 下 所有奇数节点，并且是 p 标签的 先选出奇数节点，然后再看是不是 p

---

而如果 nth-child(2n+1)

#nthExample-2 p:nth-of-type(2n+1) {background:#396;color:#fff;}

效果如下：

意思是：#nthExample-2 下所有 p 标签的 奇数的 那些 先选出p，然后找到 第奇数个的

小练习！

html 代码

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
    <dt>名词</dt>
    <dd>解释</dd>
    <dt>名词</dt>
    <dd>解释</dd>
</dl>

我们想选择第三条解释 (dd)，怎么写呢？

如果：dl :nth-child(3) {background:#006;}

你将得到

名词

解释

名词

解释

名词

解释

选择 dl 下的第三个元素（而不是第三个dd）

如果：dd:nth-child(3) {background:#069;}

你将得到

名词

解释

名词

解释

名词

解释

选择 dl 下的第三个元素，并且还是 dd 的（对不起，这两个条件放在一起，太苛刻了）

快请出 nth-of-type 大神吧

dd:nth-of-type(3) {background:green;}

名词

解释

名词

解释

名词

解释

没错，我要的就是第三个 dd

小技巧：nth-of-type(odd) 奇数个，even 偶数；nth-of-type(4n) 每4个；

nth-of-type 的小问题

nth-of-type 处理伪类的时候，有点问题！bug?

比如代码

<style>
div.wrapper .b:nth-of-type(2) {background:#c00;}
</style>

<div class="wrapper">
    <div>111</div>
    <div class="b">222</div>
    <div class="b">333</div>
    <div class="b">444</div>
</div>

效果如下：

不是我所要求的 第二个 div.b。用 div.wrapper .b:nth-child(2) {background:#c00;} 效果一样。也就是说，似乎 nth-of-type 只能匹配 标签而不能 .b