:nth-child
:nth-child
该:nth-child(an+b)
CSS伪类匹配的是一个在它之前有an+b-1
个同胞元素的元素,其中n
为正或零。更简单地说,该选择器匹配在一系列兄弟节点中的数字位置与模式an + b
匹配的元素。
/* Selects every fourth child element inside the body */
/* regardless of element type */
body :nth-child(4n) {
background-color: lime;
}
一些注意事项:
0n+3
,或者简单地3
,与第三个元素匹配。
1n+0
或简单地说n
,匹配每个元素。(兼容性提示:n在
An
droid浏览器4.3及以下无法正常运行,而1n
可以。1n
等同于1n+0,
使用时可自由选择。)
2n+0
,或者简单地说2n
,匹配元素2,4,6,8等。您可以用关键字even
替代这个表达式。
2n+1
匹配元素1,3,5,7等。您可以用关键字odd
替代此表达式。
3n+4
匹配元素4,7,10,13等
值a
和b
必须都是整数,并且元素的第一个子元素的索引是1.换句话说,这个类匹配索引落入集合{a
n + b
; n = 0,1,2,...}中的元素。
语法
:nth-child( <nth> [ of <selector># ]? )where
<nth> = <an-plus-b> | even | odd
实例
实例选择器
tr:nth-child(2n+1)
表示HTML表格的奇数行。
完整的例子
以下HTML ...
<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code><em></code>
inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p>
<div class="first">
<span>This span is selected!</span>
<span>This span is not. :(</span>
<span>What about this?</span>
<span>And this one?</span>
<span>Another example</span>
<span>Yet another example</span>
<span>Aaaaand another</span>
</div>
<p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code><em></code>
inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the
counting because it is a child, but it isn't selected because it isn't a
<code><span></code>.</p>
<div class="second">
<span>This span is selected!</span>
<span>This span is not. :(</span>
<em>This one is an em.</em>
<span>What about this?</span>
<span>And this one?</span>
<span>Another example</span>
<span>Yet another example</span>
<span>Aaaaand another</span>
</div>
<p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code><em></code>
inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't
used in the counting or selected because it is an <code><em></code>,
not a <code><span></code>, and <code>nth-of-type</code> only selects
children of that type. The <code><em></code> is completely skipped
over and ignored.</p>
<div class="third">
<span>This span is selected!</span>
<span>This span is not. :(</span>
<em>This one is an em.</em>
<span>What about this?</span>
<span>And this one?</span>
<span>Another example</span>
<span>Yet another example</span>
<span>Aaaaand another</span>
</div>
...使用这个CSS ...
html {
font-family: sans-serif;
}
span, div em {
padding: 10px;
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;
}
...将导致:
规范
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':nth-child' in that specification. | Working Draft | Added of <selector> syntax and noted that matching elements are not required to have a parent. |
Selectors Level 3The definition of ':nth-child' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.51 | 3.1 |
of <selector> syntax | No support | ? | No support2 | ? | ? | ? |
No parent required | 57 | ? | 51 (51)3 | ? | 44 | ? |
Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 1.0 (1.9.1)2 | 9.0 | 9.51 | 3.1 |
of <selector> syntax | No support | ? | ? | No support2 | ? | ? | ? |
No parent required | 57 | 57 | ? | 51.0 (51)3 | ? | 44 | ? |