html中 CSS3 :nth-child() 选择器

:nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。

n 可以是一个数字，一个关键字，或者一个公式。

注意重点：这个选择器是先选中位置

比如 这样就是选中.box下的第一个位置的元素是p标签的元素 

如下就不能选中，第一个位置的标签不是p 就无法选中

.box>p:nth-child(1){
background: red;
}

<div class="box">
<span>1</span>
<p>2</p>
<h1>1</h1>

<h1></h1>

</div>

该选择器匹配同类型中的第n个同级兄弟元素。

指定每个p元素匹配父元素中的第2个子元素的背景色：

p:nth-child(2)
{
  background:#ff0000;
}

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

p:nth-child(odd)
{
  background:#ff0000;
}
p:nth-child(even)
{
  background:#0000ff;
}