首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:nth-of-type

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

代码语言:javascript
复制
/* Selects every fourth <div> inside a parent element */
div:nth-of-type(4n) {
? background-color: lime;
}

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

语法

代码语言:javascript
复制
:nth-of-type( <nth> )where 
<nth> = <an-plus-b> | even | odd

实例

CSS

代码语言:javascript
复制
/* 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

代码语言:javascript
复制
<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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com