概述

nth-child(an+b) : CSS 伪类 匹配文档树中在其之前具有  an+b-1兄弟姐妹的元素,对于n的给定正值或零值,并且具有父元素。更简单地说,选择器匹配多个子元素,其中子系列中的数字位置与模式an + b匹配。

示例:

  • 1n+0,或n,匹配每一个子元素。
  • 2n+0,或2n,匹配位置为2468…的子元素,该表达式与关键字even等价。
  • 2n+1匹配位置为1357…的子元素、该表达式与关键字odd等价。
  • 3n+4匹配位置为471013…的子元素。

ab的值必须为整数,第一个子元素的位置为1,也就是说,该伪类匹配所有位置落在集合{an+b;n=0,1,2,…}中的元素。

 

经常用于表格的隔行匹配。

 

语法

element:nth-child(an + b) { 
  /*规则*/
}

示例

选择器示例

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

显示效果:

标准规范

Specification Status Comment
Selectors Level 4
:nth-child
Working Draft No change.
Selectors Level 3
:nth-child
Recommendation Initial definition.

兼容

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不能匹配动态插入的元素。

文档标签和贡献者

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