CSS 通过伪类 nth-child 和 nth-of-type 实现奇偶选择器的区别

导读

• 本文先通过两个比较全面的实战代码示例，向大家展示:nth-child和:nth-of-type的基本使用方法；
• 然后，对比分析示例结果，做出文中提到的这两个伪类的区别。

语法介绍

个人理解，这两个伪类都是函数式的，都有一个参数，语法格式如下：

:nth-child(n)
:nth-of-type(n)
1
2

可以看到它们都有一个参数 n ，它的值有以下三种可能：

• 可以是一个数字，如：1,2,3；
• 可以是一个关键字，如：odd（奇数行）,even（偶数行）等；
• 可以是一个公式，如：2n+1（奇数行），2n（偶数行），-n+3（前三个）等。

:nth-child 示例

代码：

p:nth-child 示例

    
1. 奇数行 - P标签
    
2. 偶数行 - DIV标签
    
3. 奇数行 - P标签
    
4. 偶数行 - P标签
    
5. 奇数行 - DIV标签
    
6. 偶数行 - P标签
    
7. 奇数行 - P标签
    
8. 偶数行 - P标签
    
9. 奇数行 - DIV标签
    
10. 偶数行 - DIV标签


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

结果：

总结（以 p:nth-child(odd) 为例说明）：

• p:nth-child(odd) 样式匹配规则是，首先必须匹配 odd 奇数行元素，其次匹配到的 odd 奇数行的元素类型还必须是 p 标签，必须同时满足这两个条件样式才生效。
• 结合上面的结果截图进行说明，如，第 1，3，7 是奇数行的同时这三行的元素类型是 p 标签，所以样式生效，而第 2、5、9、10 虽然匹配奇偶规则但是它们不是 p 标签，因此样式不生效。

:nth-of-type 示例

代码：

p:nth-of-type 示例

    
1. P标签 - 奇数行
    
2. DIV标签 - 奇数行
    
3. P标签 - 偶数行
    
4. P标签 - 奇数行
    
5. DIV标签 - 偶数行
    
6. P标签 - 偶数行
    
7. P标签 - 奇数行
    
8. P标签 - 偶数行
    
9. DIV 标签 - 奇数行
    
10. P标签 - 奇数行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

结果：

总结（以 p:nth-of-type(odd) 为例说明）：

• p:nth-of-type(odd) 样式匹配规则是，首先必须匹配元素类型为 p 标签，然后根据匹配到的结果（也就是 div.list-2nd 的所有元素类型为 p 标签的子元素），再从这个结果元素列表中匹配满足 odd 奇数行的子元素，样式才生效。
• 结合上面的结果截图进行说明，如，先匹配到 div.list-2nd 中所有子元素中 p 标签，然后从这些 p 标签中查找到奇数行元素，给它们设置样式。

:nth-child(n) 与 :nth-of-type(n) 的区别

• 二者都是从父元素的子元素中匹配，或者说从同级兄弟元素中匹配，区别是主要是匹配规则不同；
• element:nth-child（n） 是先根据 n 匹配规则，在此基础上匹配 element；
• element:nth-of-type(n) 是先匹配 element，然后从匹配的结果中根据 n 匹配。