files/zh-cn/web/css/_colon_nth-child/index.html


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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

---
title: ':nth-child'
slug: 'Web/CSS/:nth-child'
tags:
  - ':nth-child'
  - CSS
  - CSS 伪类
translation_of: 'Web/CSS/:nth-child'
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">概述</h2>

<p><strong><code>:nth-child(an+b)</code></strong> 这个 <a href="/en-US/docs/CSS/Pseudo-classes">CSS 伪类</a>首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：</p>

<ul>
 <li><code>0n+3</code> 或简单的 <code>3</code> 匹配第三个元素。</li>
 <li><code>1n+0</code> 或简单的 <code>n</code> 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 <code>n</code> 和 <code>1n</code> 的匹配方式不一致。<code>1n</code> 和 <code>1n+0</code> 是一致的，可根据喜好任选其一来使用。）</li>
 <li><code>2n+0</code> 或简单的 <code>2n</code> 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 <strong><code>even</code></strong> 来替换此表达式。</li>
 <li><code>2n+1</code> 匹配位置为 1、3、5、7...的元素。你可以使用关键字 <strong><code>odd</code></strong> 来替换此表达式。</li>
 <li><code>3n+4</code> 匹配位置为 4、7、10、13...的元素。</li>
</ul>

<p><code><em>a</em></code> 和 <code><em>b</em></code> 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，<code><em>an</em></code> 必须写在 <code><em>b</em></code> 的前面，不能写成 <code><em>b+an</em></code> 的形式。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="选择器示例">选择器示例</h3>

<dl>
 <dt><code>tr:nth-child(2n+1)</code></dt>
 <dd>表示HTML表格中的奇数行。</dd>
 <dt><code>tr:nth-child(odd)</code></dt>
 <dd>表示HTML表格中的奇数行。</dd>
 <dt><code>tr:nth-child(2n)</code></dt>
 <dd>表示HTML表格中的偶数行。</dd>
 <dt><code>tr:nth-child(even)</code></dt>
 <dd>表示HTML表格中的偶数行。</dd>
 <dt><code>span:nth-child(0n+1)</code></dt>
 <dd>表示子元素中第一个且为span的元素，与 <span style="background-color: #ffffff; color: #4d4e53; font-family: open sans,arial,sans-serif; font-size: 14px; line-height: 21px;">{{Cssxref(":first-child")}} </span>选择器作用相同。</dd>
 <dt><code>span:nth-child(1)</code></dt>
 <dd>表示父元素中子元素为第一的并且名字为span的标签被选中</dd>
 <dt><code>span:nth-child(-n+3)</code></dt>
 <dd>匹配前三个子元素中的span元素。</dd>
</dl>

<h3 id="Detailed_example">Detailed example</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITHOUT an
   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
&lt;p&gt;Children 1, 3, 5, and 7 are selected.&lt;/p&gt;
&lt;div class="first"&gt;
  &lt;span&gt;Span 1!&lt;/span&gt;
  &lt;span&gt;Span 2&lt;/span&gt;
  &lt;span&gt;Span 3!&lt;/span&gt;
  &lt;span&gt;Span 4&lt;/span&gt;
  &lt;span&gt;Span 5!&lt;/span&gt;
  &lt;span&gt;Span 6&lt;/span&gt;
  &lt;span&gt;Span 7!&lt;/span&gt;
&lt;/div&gt;

&lt;br&gt;

&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITH an
   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
&lt;p&gt;Children 1, 5, and 7 are selected.&lt;br&gt;
   3 is used in the counting because it is a child, but it isn't
   selected because it isn't a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
&lt;div class="second"&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;em&gt;This is an `em`.&lt;/em&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
&lt;/div&gt;

&lt;br&gt;

&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, WITH an
   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
&lt;p&gt;Children 1, 4, 6, and 8 are selected.&lt;br&gt;
   3 isn't used in the counting or selected because it is an &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
   not a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, and &lt;code&gt;nth-of-type&lt;/code&gt; only selects
   children of that type. The &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; is completely skipped
   over and ignored.&lt;/p&gt;
&lt;div class="third"&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;em&gt;This is an `em`.&lt;/em&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;span&gt;Span!&lt;/span&gt;
  &lt;span&gt;Span&lt;/span&gt;
  &lt;span&gt;Span!&lt;/span&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}</pre>

<h4 id="最终效果：">最终效果：</h4>

<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p>


<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>未变化。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>初始化定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="兼容性">兼容性</h2>

{{Compat("css.selectors.nth-child")}}

<h2 id="注意">注意</h2>

<ul>
 <li>Opera 不能处理动态插入的元素。</li>
</ul>

<h2 id="参见">参见</h2>

<ul>
 <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
</ul>