CSS3 :nth-child()
规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2)
{
background:#ff0000;
}
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
CSS3 :nth-of-type()
指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：
p:nth-of-type(2)
{
background:#ff0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
总结一下:
p:nth-child(2)
1.这个元素正好是父元素的第二个元素。2.这个值正好是p。那么选中
p:nth-of-type(2)
在父元素下面直接找第二个p元素
nth-child的关键词是child，它关心的是所有子元素。它会对所有子元素生效。ele:nth-child的意义就是选择父元素下的第n个子元素，如果他是ele类型的，那么对他生效，如果他不是ele类型的，则不生效。
nth-of-type的关键词是type，即他关心的是类型。它不会对所有子元素生效，只会对子元素中符合选择器要求的类型的子元素进行筛选，而忽略非选择器要求的类型的子元素。ele:nth-of-type(n)的意义就是选择父元素下的第n个ele类型的子元素。