CSS3新增伪类选择符:nth-child用法

:nth-child

E:nth-child(n) 匹配其父元素的第n个子元素，如果该子元素不是E，则选择符无效。如：p:nth-child(2)，匹配父元素的第二个子元素，如果该元素是p则生效。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<b>4</b>
			<span>5</span>
			<span>6</span>
			<span>7</span>
		</div>

	</body>
</html>

span:nth-child(3) {color: red;}

匹配父元素的第三个元素，该元素为span，则生效。

span:nth-child(4) {color: red;}

匹配父元素的第四个元素，该元素不为span，则无效。

将第四个元素匹配b，b:nth-child(4) {color: red;}，则同样生效

选取从第n个元素开始的所有指定元素

n表示从0开始的所有正整数

span:nth-child(n+2) {color: red;}

选取从第奇数个指定元素

span:nth-child(2n-1) {color: red;}

选取从第偶数个指定元素

span:nth-child(2n) {color: red;}

:nth-of-type

:nth-child只能选择父元素的n个元素，如果元素和指定元素不符，则无效。如果我们想选取父元素的第n个指定元素，则就需要用:nth-of-type。

E:nth-of-type(n)选取父元素的第n个指定类型为E的元素。如果不存在则无效。

选取第4个指定类型的元素

span:nth-of-type(4) {color: red;}

:last-child

E:last-child匹配父元素的最后一个元素，如果为指定的类型E，则生效。

span:last-child {color: red;}

:only-child

E:only-child匹配父元素的如果父元素只有一个子元素且类型为指定类型E，则生效。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span:only-child {color: red;}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
		</div>
		<div>
			<span>2</span>
			<span>3</span>
		</div>
		<div>
			<span>4</span>
		</div>
	</body>
</html>

:nth-last-child

E:nth-last-child(n)匹配父元素的倒数第n个子元素，如果子元素类型为E，则生效。

span:nth-last-child(3) {color: red;}

:first-of-type

E:first-of-type匹配父元素的第1个元素类型为E的子元素，如果存在，则生效。

span:first-of-type {color: red;}

:last-of-type

E:last-of-type匹配父元素的最后1个元素类型为E的子元素，如果存在，则生效。

span:last-of-type {color: red;}

:only-of-type

E:only-of-type匹配父元素的是否存在唯一一个类型为E的子元素，如果存在，则生效。

b:last-of-type {color: red;}

秒客网