首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:nth-child

:nth-child(an+b)CSS伪类匹配的是一个在它之前有an+b-1个同胞元素的元素,其中n为正或零。更简单地说,该选择器匹配在一系列兄弟节点中的数字位置与模式an + b匹配的元素。

代码语言:javascript
复制
/* 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在Android浏览器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等

ab必须都是整数,并且元素的第一个子元素的索引是1.换句话说,这个类匹配索引落入集合{an + b; n = 0,1,2,...}中的元素。

语法

代码语言:javascript
复制
: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)如果元素是其父项的前三个子项之一并且也是一个跨度,则匹配。

完整的例子

以下HTML ...

代码语言:javascript
复制
<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>span: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 ...

代码语言:javascript
复制
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

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com