:nth-of-type

该:nth-of-type(an+b)CSS伪类匹配的是在它之前有an+b-1个的同类型的同胞元素的元素，其中的n是正数或零。

/* Selects every fourth <div> inside a parent element */
div:nth-of-type(4n) {
  background-color: lime;
}

请参阅有关:nth-child的文档见更全面的描述。

语法

:nth-of-type( <nth> )where 
<nth> = <an-plus-b> | even | odd

实例

CSS

/* Align odd paragraphs to the left */
p:nth-of-type(2n+1) { text-align: left; }

/* Align even paragraphs to the right */
p:nth-of-type(2n) { text-align: right; }

HTML

<div>
    <div>This element isn't counted.</div>
    <p>First paragraph. (left aligned)</p>
    <p>Second paragraph. (right aligned)</p>
    <div>This element isn't counted.</div>
    <p>Third paragraph. (left aligned)</p>
</div>

结果

规范

浏览器兼容性