View in EnglishAlways switch to English

: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 2015年7月.

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

尝试一下

dt {  font-weight: bold;}dd {  margin: 3px;}dd:nth-of-type(even) {  border: 2px solid orange;}

<dl>  <dt>Vegetables:</dt>  <dd>1. Tomatoes</dd>  <dd>2. Cucumbers</dd>  <dd>3. Mushrooms</dd>  <dt>Fruits:</dt>  <dd>4. Apples</dd>  <dd>5. Mangos</dd>  <dd>6. Pears</dd>  <dd>7. Oranges</dd></dl>

语法

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

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

css

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

示例

基本示例

HTML

html

<div>  <div>这段不参与计数。</div>  <p>这是第一段。</p>  <p>这是第二段。</p>  <div>这段不参与计数。</div>  <p>这是第三段。</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;}