:nth-of-type

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

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

语法

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

详细语法参见 :nth-child 。

正式语法

Error: could not find syntax for this item

示例

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;
}

最终效果

规范

Specification
Selectors Level 4
# nth-of-type-pseudo

浏览器兼容性

BCD tables only load in the browser

参见