:nth-of-type

翻译不完整。 请帮助我们翻译这篇文章!

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

/* 在每组兄弟元素中选择第四个 <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

参见