21. CSS3 结构性伪类选择器 :nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数 n 的起始值始终是 1，而不是 0。也就是说，参数 n 的值为 0 时，选择器将选择不到任何匹配的元素。

经验与技巧：

当:nth-child(n)选择器中的 n 为一个表达式时，其中 n 是从 0 开始计算，当表达式的值为 0 或小于 0 的时候，不选择任何匹配的元素。如下表所示：

实例演示

通过:nth-child(n)选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。

HTML 代码：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS 代码：

ol > li:nth-child(2n){
  background: orange;
}

效果如下：

以上关于21. CSS3 结构性伪类选择器 :nth-child(n)的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。