返回到:CSS 伪类(Pseudo-classes) | CSS教程
定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
n 可以是一个数字,一个关键字,或者一个公式。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器 | 谷歌 | IE | 火狐 | 苹果 | opera |
---|---|---|---|---|---|
:nth-child(n) | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
实例
指定每个 p 元素匹配的父元素中第 2 个子元素的背景色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程(web176.com)</title> <style> p:nth-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是一个标题</h1> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> <p>这是第四个段落。</p> <p><b>注意:</b> Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.</p> </body> </html>
奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数(该索引的第一个子节点是1)。 在这里,我们为奇数和偶数p元素指定两个不同的背景颜色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程(web176.com)</title> <style> p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } </style> </head> <body> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p><b>注意:</b> Internet Explorer 8 and以及更早版本的浏览器 :nth-child()选择器.</p> </body> </html>
使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。 在这里,我们对所有索引是3的倍数的p元素指定了背景颜色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程(web176.com)</title> <style> p:nth-child(3n+0) { background:#ff0000; } </style> </head> <body> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> <p>The fifth paragraph.</p> <p>The sixth paragraph.</p> <p>The seventh paragraph.</p> <p>The eight paragraph.</p> <p>The ninth paragraph.</p> <p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器不支持:nth-child()选择器.</p> </body> </html>
作者:terry,如若转载,请注明出处:https://www.web176.com/cssprop/5370.html