CSS 中的 :nth-child(an+b) 是一个"结构伪类"选择器,它按照元素在 同一父元素下所有同级子节点的"绝对序号" 来匹配,而不是只看"同类"元素。
语法公式:
css
:nth-child(an + b) /* a、b 为整数,n 从 0 开始递增 */
常用关键字/公式速查
odd等价于2n+1even等价于2n3n+1第 1、4、7... 项-n+5前 5 项(n=0→5, n=1→4 ... n=5→0,之后为负不再匹配)
完整规则与示例
-
序号从 1 开始计数,且先按位置找,再核对类型 。
若第 n 个子节点不是写在选择器前面的类型,则匹配失败。
例:
div:nth-child(3)只有当父元素的第 3 个子节点同时是 div 时才生效。 -
典型用法
表格隔行变色
csstr:nth-child(even) { background:#f5f5f5; } /* 偶数行 */ tr:nth-child(odd) { background:#fff; } /* 奇数行 */列表前 3 项高亮
cssli:nth-child(-n+3) { color: red; }每 3 张图片去掉右边距
css.gallery img:nth-child(3n) { margin-right: 0; } -
与
:nth-of-type的区别
:nth-child先数所有兄弟 ,再核对类型;
:nth-of-type只数同类兄弟 ,再取第 n 个。示例 HTML:
html<article> <p>P1</p> <div>D1</div> <p>P2</p> </article>p:nth-child(3)能命中"P2",因为第 3 个子节点就是 p。p:nth-child(2)不会命中任何元素,因为第 2 个子节点是 div。p:nth-of-type(2)会命中"P2",它只数 p 的同类顺序。
-
性能提示
避免过度嵌套(如
html body div.wrapper ... :nth-child),保持选择器扁平;对于大数据列表,优先在父级一次性写规则,不要给每项再加类。
掌握"先定位序号、再核对类型"的核心思想,就可以用 :nth-child 一套公式搞定条纹、循环、切片等各种排版需求,而无需额外类名或脚本。