: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;}
more
: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;}