:nth-of-type - CSS（层叠样式表） 编辑

: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	首次定义

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• :nth-child, :nth-last-of-type