目录

:nth-child

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

 

语法

element:nth-child(an + b) { 
  /*规则*/
}

描述
:nth-child(2n+1)规定奇数行。
nth-child(odd)规定奇数行。
nth-child(2n)规定偶数行。
nth-child(even)规定偶数行。
:nth-child(0n+1)规定子元素中第一个元素,与 :first-child 选择器作用相同。

例子

HTML

<div class="stage">
  <p>第一个段落。</p>
  <p>第二个段落。</p>
  <p>第三个段落。</p>
  <p>第四个段落。</p>
</div>

CSS

.stage p:nth-child(2) {
  background:red;//stage 内的第二个p元素,设置背景red。
}
.stage{
  color:#fff;
  width:340px;
  background:#333;
  padding:20px;
}

执行结果

第一个段落。

第二个段落。

第三个段落。

第四个段落。

参考

相关页面