html中CSS3：nth-child（）选择器
:nth-child(n)选择器匹配⽗元素中的第n个⼦元素。参数是元素的索引。索引从1开始。
n 可以是⼀个数字，⼀个关键字，或者⼀个公式。
注意重点：这个选择器是先选中位置
⽐如这样就是选中.box下的第⼀个位置的元素是p标签的元素
css选择器分为哪几类如下就不能选中，第⼀个位置的标签不是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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。