在HTML5与CSS3的前端开发中，我们时常会用到结构性伪类选择器:nth-child和:nth-of-type，这两者的用法有许多相似之处，但也有不同，搞清楚这两者的区别，让我们在实际开发者能更快速和方便。

一、:nth-child(n)

定义：选择器匹配属于其父元素的第 n 个子元素，不论元素的类型，n从1开始，n 可以是数字、关键词或公式————引自W3C

用法示例：

1.常规用法

#u1 li:nth-child(5) {
    background: #843534;
}

上述代码：ID为u1中第5个li元素背景为 #843534，如下图所示：

注意：但是当我们的html结构中如果混入了其他类型的元素，就会发现上述CSS失效了，特殊情况html：

<ul id="u1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <div>5*</div>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

结果如下图：

究其原因，是因为在子元素中，序号为5的是div，而我们上面写的是li，所以浏览器无法找到序号为5的li，所以如果我们要想改变5号div的背景就因该写成这样：

#u1 div:nth-child(5) {
	background: #ffff00;
}

综上，我们再来看:nth-child的定义，不难理解，在父元素中，所有的子元素都是按照1-n的顺序，不论子元素是什么类型。

2.关键词用法

#u3 li:nth-child(odd) {
	background: #ff0000;
}

上述代码：ID为u3中所有奇数个li的背景为红色，即1，3，5，7，9……，如下图所示

#u4 li:nth-child(even) {
	background: green;
}

上述代码：ID为u4中所有偶数个li的背景为绿色，即2，4，6，8，10……，如下图所示

3.表达式用法

#u5 li:nth-child(3n) {
	background: deepskyblue;
}

上述代码：ID为u5中所有3的倍数个li元素的背景色为蓝色，即3，6，9，12……，如下图

同样的道理，在此基础上你可以改成4的倍数、5的倍数、7的倍数等等

表达式用法2

#u6 li:nth-child(3n+1) {
	background: yellowgreen;
}

上述代码：ID为u6中所有3的倍数+1个li元素的背景为黄绿色，即1，4，7，10，13……，如下图

上述:nth-child，起始元素的序号是从头部开始的，而相反的:nth-last-child的起始元素的序号是从尾部开始的，用法和上面的类似，只不过是倒数开始。

完整示例见：http://www.hawklu.com/test/nth-child.html

版权声明：本文为博主原创，未经允许请勿转载