MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概述

:nth-of-type(an+b) 这个 CSS 伪类 匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值。

语法

: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>

结果

规范

规范 状态 备注
Selectors Level 4
:nth-of-type
Working Draft No change.
Selectors Level 3
:nth-of-type
Recommendation Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 9.5 3.1

相关资料

文档标签和贡献者

 此页面的贡献者: PoppinL, xgqfrms-GitHub, Pandapm, PageYe, sudo2015, FredWe
 最后编辑者: PoppinL,