:nth-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:nth-of-type() CSS 伪类基于相同类型(标签名称)的兄弟元素中的位置来匹配元素。

尝试一下

语法

nth-of-type 伪类用单个参数指定,该参数表示匹配元素的模式。

有关其语法的详细说明,请参阅 :nth-child

css
:nth-of-type(<an-plus-b> | even | odd) {
  /* ... */
}

示例

基本示例

HTML

html
<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p class="fancy">这是第二段。</p>
  <div>这段不参与计数。</div>
  <p class="fancy">这是第三段。</p>
  <p>这是第四段。</p>
</div>

CSS

css
/* 奇数段 */
p:nth-of-type(2n + 1) {
  color: red;
}

/* 偶数段 */
p:nth-of-type(2n) {
  color: blue;
}

/* 第一段 */
p:nth-of-type(1) {
  font-weight: bold;
}

/* 这将匹配第三个段落,因为它匹配的元素是 2n+1 并且具有 fancy 类。
   第二个段落具有 fancy 类,但不匹配,因为它不是:nth-of-type(2n+1)。
*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

结果

备注: 使用此选择器无法选择 nth-of-class。选择器仅在创建匹配列表时查找类型。但是你可以基于 :nth-of-type 的位置类名为元素应用 CSS,就像上面的示例中所示。

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见