: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;
}
{
background:#ff0000;
}
奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。在这里,我们为奇数和偶数p元素指定两个不同的背景颜色:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}