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

:nth-of-type() CSS 伪类 根据它们在一组兄弟中的次序位置匹配给定类型的元素。

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

语法

nth-of-type 伪类 is specified with a single argument, which represents the pattern for matching elements.

参见 :nth-child for a more detailed explanation of its syntax.

正式语法

:nth-of-type( <nth> )

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

示例

基础示例

HTML

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

CSS

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

Result

规范

规范 状态 备注
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 ?

See also

参见

文档标签和贡献者

最后编辑者: RainSlide,