MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概述

:nth-child(an+b) 这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素。

示例:

  • 0n+3 或简单的 3 匹配第三个元素。
  • 1n+0 或简单的 n 匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本 n1n 的匹配方式不一致。1n1n+0 是一致的,可根据喜好任选其一来使用。)
  • 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素。你可以使用关键字 even 来替换此表达式。
  • 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
  • 3n+4 匹配位置为 4、7、10、13...的元素。

ab 都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。

语法

:nth-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

示例

选择器示例

tr:nth-child(2n+1)
表示HTML表格中的奇数行。
tr:nth-child(odd)
表示HTML表格中的奇数行。
tr:nth-child(2n)
表示HTML表格中的偶数行。
tr:nth-child(even)
表示HTML表格中的偶数行。
span:nth-child(0n+1)
表示子元素中第一个且为span的元素,与 :first-child 选择器作用相同。
span:nth-child(1)
同上。
span:nth-child(-n+3)
匹配前三个子元素中的span元素。

完整示例

HTML:

<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</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>&lt;em&gt;</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>&lt;span&gt;</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>nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</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>&lt;em&gt;</code>, 
not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
 children of that type. The <code>&lt;em&gt;</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;
}

最终效果:

规范

规范 状态 备注
Selectors Level 4
:nth-child
Working Draft 未变化。
Selectors Level 3
:nth-child
Recommendation 初始化定义。

兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1 
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 9.5 3.1

注意

  • Opera 不能处理动态插入的元素。

相关资料

文档标签和贡献者

标签: 
 此页面的贡献者: PoppinL, xgqfrms-GitHub, BiggerCheng, hstarorg, FredWe, hutuxu
 最后编辑者: PoppinL,