:nth-of-type

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

/* 在每组兄弟元素中选择第四个 <p> 元素 */
p:nth-of-type(4n) {
  color: lime;
}

语法

nth-of-type伪类指定一个实际参数,这个参数使用一种模式来匹配哪些元素应该被选中。

详细语法参见 :nth-child

正式语法

:nth-of-type( <nth> )

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

示例

Basic example

HTML

<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p>这是第二段。</p>
  <div>这段不参与计数。</div>
  <p>这是第三段。</p>
  <p>这是第四段。</p>
</div>

CSS

/* 奇数段 */
p:nth-of-type(2n+1) {
  color: red;
}

/* 偶数段 */
p:nth-of-type(2n) {
  color: blue;
}

/* 第一段 */
p:nth-of-type(1) {
  font-weight: bold;
}

最终效果

规范

规范 状态 备注
Selectors Level 4
:nth-of-type
Working Draft 匹配元素不要求有一个父项。
Selectors Level 3
:nth-of-type
Recommendation 首次定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:nth-of-type()Chrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见