:nth-of-type
:nth-of-type()
这个 CSS 伪类是针对具有一组兄弟节点的标签,用 n 来筛选出在一组兄弟节点的位置。
/* 在每组兄弟元素中选择第四个 <p> 元素 */
p:nth-of-type(4n) {
color: lime;
}
语法
**nth-of-type
**伪类指定一个实际参数,这个参数使用一种模式来匹配哪些元素应该被选中。
详细语法参见 :nth-child
。
正式语法
Error: could not find syntax for this item
示例
Basic example
HTML
<div>
<div>这段不参与计数。</div>
<p>这是第一段。</p>
<p>这是第二段。</p>
<div>这段不参与计数。</div>
<p>这是第三段。</p>
<p>这是第四段。</p>
</div>
CSS
/* 奇数段 */
p:nth-of-type(2n+1) {
color: red;
}
/* 偶数段 */
p:nth-of-type(2n) {
color: blue;
}
/* 第一段 */
p:nth-of-type(1) {
font-weight: bold;
}
最终效果
规范
Specification |
---|
Selectors Level 4 # nth-of-type-pseudo |
浏览器兼容性
BCD tables only load in the browser