:nth-of-type

概述

nth-of-type(an+b) CSS伪类匹配在文档树中具有之前具有相同元素名称的+ b-1兄弟元素的元素, 对于n的给定正值或零值,并且具有父元素。参见 :nth-child关于伪元素参数语法详细的说明. 如果你想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素,这个伪元素更加灵活实用.

语法

:nth-of-type( <an-plus-b> ) { style properties }

where
<an-plus-b> = An+B | even | odd

element:nth-of-type(an + b) { style properties }

示例

这个例子使得不同段落(<p>元素)的文本对齐方式为左右交替呈现。

示例 CSS

p:nth-of-type(2n+1) { text-align: left; }
p:nth-of-type(2n) { text-align: right; }

示例 HTML

<div>
    <p>First paragraph (left aligned)</p>
    <p>Second paragraph (right aligned)</p>
    <p>Third paragraph (left aligned)</p>
</div>

规范

Specification Status Comment
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

参见

文档标签和贡献者

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