这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

语法

详细语法参见 :nth-child

正式语法

:nth-of-type( <nth> )

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

示例

基础示例

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 Matching elements are not required to have a parent.
Selectors Level 3
:nth-of-type
Recommendation Initial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes3.599.53.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 ? Yes49.53.1 ?

参见

文档标签和贡献者

最后编辑者: genezx,