一、nth-of-type、nth-child
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
二、共同
1.Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
:nth-of-type
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <script src="http://m.baidu.com/static/search/3600/zepto.js"></script> <title></title> <style> p { color:#fff; } p:nth-of-type(odd){ background-color:#f00; } p:nth-of-type(even){ background-color:#00f; } </style> </head> <body> <div> <div>0</div> <p class="type">1</p> <p class="type">2</p> <p class="type">3</p> <p class="type">4</p> </div> </body> </html>
:nth-child
p { color:#fff; }
p:nth-child(odd){ background-color:#f00; } p:nth-child(even){ background-color:#00f; }
:nth-of-type :nth-child
2.使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
:nth-of-type
p { color:#00f; } p:nth-of-type(2n+0){ background-color:#f00; }
:nth-child
p { color:#00f; } p:nth-child(2n+0){ background-color:#f00; }
:nth-of-type :nth-child
3.注意：:nth-of-type 和:nth-child都只能用于元素节点，不能用于class节点
三、公用
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd){ background:#ff0000; }p:nth-of-type(even){ background:#0000ff; }
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}四、区别
五、注意
原文：http://www.cnblogs.com/mywaystrech/p/5033605.html