:nth-of-type
: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>
结果
规范
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4The definition of ':nth-of-type' in that specification. | Working Draft | Matching elements are not required to have a parent. |
| Selectors Level 3The definition of ':nth-of-type' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.1 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 | (Yes) | 1.0 (1.9.1) | 9.0 | 9.5 | 3.1 |
