CSS

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

结果

规范

SpecificationStatusComment
Selectors Level 4The definition of ':nth-of-type' in that specification.Working DraftMatching elements are not required to have a parent.
Selectors Level 3The definition of ':nth-of-type' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0(Yes)3.5 (1.9.1)9.09.53.1

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1(Yes)1.0 (1.9.1)9.09.53.1