 子元素伪类选择器 详解)
【H5 前端开发笔记】第 20 期CSS 选择器 (5) —— 子元素伪类选择器 详解结构伪类 / Structural Pseudo-classes这一期重点讲解基于文档树结构的伪类也叫树结构伪类它们不依赖类、ID、属性而是根据元素在父元素中的位置关系来选择非常适合做列表、表格、网格、卡片组的“隔行变色”“首尾特殊处理”“循环条纹”等效果。这些伪类在CSS3 Selectors中引入现代浏览器2026 年全部完美支持。一、核心子元素结构伪类一览表伪类含义计数依据从哪数起常用场景特异性:first-child作为父元素的第一个子元素所有子元素从前去掉第一个元素的上边距0,1,0:last-child作为父元素的最后一个子元素所有子元素从后去掉最后一个元素的下边距0,1,0:only-child父元素唯一的子元素所有子元素—单条数据时的特殊样式0,1,0:first-of-type同类型标签中第一个同标签类型的子元素从前文章中第一个 p 加粗标题感0,1,0:last-of-type同类型标签中最后一个同标签类型的子元素从后去掉最后一个段落下边距0,1,0:only-of-type同类型标签中唯一的一个同标签类型的子元素—只有一个 h2 时放大显示0,1,0:nth-child(n)第 n 个子元素公式所有子元素从前隔行变色、3列循环、14n 等0,1,0:nth-last-child(n)倒数第 n 个子元素公式所有子元素从后最后 3 个元素特殊处理0,1,0:nth-of-type(n)同类型中第 n 个公式同标签类型的子元素从前只给 p 标签隔行变色0,1,0:nth-last-of-type(n)同类型中倒数第 n 个公式同标签类型的子元素从后最后一个 li 不同样式0,1,0二、最重要区别child vs of-type:nth-child / :first-child / :last-child→看“出生顺序”不管标签是什么只要是第几个孩子就行:nth-of-type / :first-of-type / :last-of-type→只在同类兄弟中排名先过滤标签类型再数第几个!-- 经典面试题场景 --ulh3标题/h3li第一项/lili第二项/lili第三项/lip说明文字/pli第四项/li/ulli:first-child{}/* 没选中因为第一个孩子是 h3 */li:first-of-type{}/* 选中 → 第一个 li“第一项” */li:nth-child(3){}/* 选中 → 第3个孩子是 li“第三项” */li:nth-of-type(3){}/* 选中 → 第三个 li“第四项” */三、:nth-child / :nth-of-type 公式速查敲代码必备写法选中元素序号从 1 开始口诀 / 常见用途:nth-child(5)正好第 5 个固定第几个:nth-child(odd)1,3,5,7…奇数行 / 斑马纹:nth-child(even)2,4,6,8…偶数行:nth-child(3n)3,6,9,12…每3个一组:nth-child(3n1)1,4,7,10…1、4、7…常用于三分栏第一列:nth-child(-n3)1,2,3前 3 个:nth-child(n4)4,5,6…从第 4 个开始:nth-child(4n2)2,6,10,14…2、6、10…常用于卡片布局-n写法很强大-n5 前 5 个四、实战代码示例建议全部运行一遍!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title结构伪类演示/titlestylebody{font-family:system-ui,sans-serif;max-width:900px;margin:2rem auto;}section{margin:3rem 0;padding:1.5rem;border:1px dashed #aaa;border-radius:8px;}/* 经典隔行变色 */.zebra li:nth-child(odd){background:#f0f8ff;}.zebra li:nth-child(even){background:#fffaf0;}/* 前3个加粗最后一个红色 */.special li:nth-child(-n3){font-weight:bold;}.special li:last-child{color:#d32f2f;font-style:italic;}/* 只针对 p 标签的 of-type 用法 */article p:first-of-type{font-size:1.3em;border-left:5px solid #4caf50;padding-left:1rem;margin-left:0;}article p:nth-of-type(2n){color:#555;font-style:italic;}/* 卡片布局每行第1个左对齐第3个右对齐 */.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}.cards div:nth-child(3n1){justify-self:start;}.cards div:nth-child(3n2){justify-self:center;}.cards div:nth-child(3n){justify-self:end;}/* only-child 场景只有一个孩子时放大 */.single :only-child{font-size:2em;color:#1976d2;text-align:center;}/style/headbodysectionclasszebrah3隔行变色nth-child/h3ulli苹果/lili香蕉/lili橙子/lili梨/lili葡萄/lili西瓜/li/ul/sectionsectionclassspecialh3前三 最后一个特殊/h3ulli置顶公告1/lili置顶公告2/lili置顶公告3/lili普通消息A/lili普通消息B/lili普通消息C/lili重要结尾/li/ul/sectionsectionh3文章首段突出first-of-type/h3articleh2标题/h2p这是第一段会被放大和加绿线。/pp第二段斜体灰色。/pp第三段正常。/pp第四段又斜体灰色。/p/article/sectionsectionclasscardsh33列卡片布局对齐nth-child 3n系列/h3divstylebackground:#e3f2fd;padding:1rem;卡1/divdivstylebackground:#e8f5e9;padding:1rem;卡2/divdivstylebackground:#fff3e0;padding:1rem;卡3/divdivstylebackground:#f3e5f5;padding:1rem;卡4/divdivstylebackground:#e0f7fa;padding:1rem;卡5/divdivstylebackground:#f1f8e9;padding:1rem;卡6/div/sectionsectionclasssingleh3只有一个孩子时特殊样式only-child/h3div只有我一个 → 会变大变蓝/div/sectionsectionclasssingleh3有多个孩子 → 普通/h3div普通A/divdiv普通B/div/section/body/html五、高频面试/实战总结表格/列表隔行变色→:nth-child(odd/even)最常用去掉首/尾边距→:first-child/:last-child去 margin/padding响应式网格最后一行对齐 →:nth-child(3n)/4n等文章排版首段/首图特殊 →:first-of-type面包屑 / 步骤条最后一个不同 →:last-child/:last-of-type避免“幽灵元素”干扰 → 用-of-type更稳当 HTML 结构可能插入其他标签时六、小坑 提示:nth-child(n)的 n 从1开始不是 0这些伪类不考虑 display:none的元素仍然按 DOM 顺序计数特异性都是0,1,0和 class 相同容易被更高特异性覆盖不要滥用复杂公式代码可读性第一下一期预告伪类下—— 交互 状态伪类:hover / :focus / :active / :checked / :disabled / :required …有特别想看的场景或公式欢迎留言祝大家结构伪类用得丝滑
【H5 前端开发笔记】第 20 期：CSS 选择器 (5) 子元素伪类选择器 详解
发布时间：2026/5/20 15:55:17
【H5 前端开发笔记】第 20 期CSS 选择器 (5) —— 子元素伪类选择器 详解结构伪类 / Structural Pseudo-classes这一期重点讲解基于文档树结构的伪类也叫树结构伪类它们不依赖类、ID、属性而是根据元素在父元素中的位置关系来选择非常适合做列表、表格、网格、卡片组的“隔行变色”“首尾特殊处理”“循环条纹”等效果。这些伪类在CSS3 Selectors中引入现代浏览器2026 年全部完美支持。一、核心子元素结构伪类一览表伪类含义计数依据从哪数起常用场景特异性:first-child作为父元素的第一个子元素所有子元素从前去掉第一个元素的上边距0,1,0:last-child作为父元素的最后一个子元素所有子元素从后去掉最后一个元素的下边距0,1,0:only-child父元素唯一的子元素所有子元素—单条数据时的特殊样式0,1,0:first-of-type同类型标签中第一个同标签类型的子元素从前文章中第一个 p 加粗标题感0,1,0:last-of-type同类型标签中最后一个同标签类型的子元素从后去掉最后一个段落下边距0,1,0:only-of-type同类型标签中唯一的一个同标签类型的子元素—只有一个 h2 时放大显示0,1,0:nth-child(n)第 n 个子元素公式所有子元素从前隔行变色、3列循环、14n 等0,1,0:nth-last-child(n)倒数第 n 个子元素公式所有子元素从后最后 3 个元素特殊处理0,1,0:nth-of-type(n)同类型中第 n 个公式同标签类型的子元素从前只给 p 标签隔行变色0,1,0:nth-last-of-type(n)同类型中倒数第 n 个公式同标签类型的子元素从后最后一个 li 不同样式0,1,0二、最重要区别child vs of-type:nth-child / :first-child / :last-child→看“出生顺序”不管标签是什么只要是第几个孩子就行:nth-of-type / :first-of-type / :last-of-type→只在同类兄弟中排名先过滤标签类型再数第几个!-- 经典面试题场景 --ulh3标题/h3li第一项/lili第二项/lili第三项/lip说明文字/pli第四项/li/ulli:first-child{}/* 没选中因为第一个孩子是 h3 */li:first-of-type{}/* 选中 → 第一个 li“第一项” */li:nth-child(3){}/* 选中 → 第3个孩子是 li“第三项” */li:nth-of-type(3){}/* 选中 → 第三个 li“第四项” */三、:nth-child / :nth-of-type 公式速查敲代码必备写法选中元素序号从 1 开始口诀 / 常见用途:nth-child(5)正好第 5 个固定第几个:nth-child(odd)1,3,5,7…奇数行 / 斑马纹:nth-child(even)2,4,6,8…偶数行:nth-child(3n)3,6,9,12…每3个一组:nth-child(3n1)1,4,7,10…1、4、7…常用于三分栏第一列:nth-child(-n3)1,2,3前 3 个:nth-child(n4)4,5,6…从第 4 个开始:nth-child(4n2)2,6,10,14…2、6、10…常用于卡片布局-n写法很强大-n5 前 5 个四、实战代码示例建议全部运行一遍!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title结构伪类演示/titlestylebody{font-family:system-ui,sans-serif;max-width:900px;margin:2rem auto;}section{margin:3rem 0;padding:1.5rem;border:1px dashed #aaa;border-radius:8px;}/* 经典隔行变色 */.zebra li:nth-child(odd){background:#f0f8ff;}.zebra li:nth-child(even){background:#fffaf0;}/* 前3个加粗最后一个红色 */.special li:nth-child(-n3){font-weight:bold;}.special li:last-child{color:#d32f2f;font-style:italic;}/* 只针对 p 标签的 of-type 用法 */article p:first-of-type{font-size:1.3em;border-left:5px solid #4caf50;padding-left:1rem;margin-left:0;}article p:nth-of-type(2n){color:#555;font-style:italic;}/* 卡片布局每行第1个左对齐第3个右对齐 */.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}.cards div:nth-child(3n1){justify-self:start;}.cards div:nth-child(3n2){justify-self:center;}.cards div:nth-child(3n){justify-self:end;}/* only-child 场景只有一个孩子时放大 */.single :only-child{font-size:2em;color:#1976d2;text-align:center;}/style/headbodysectionclasszebrah3隔行变色nth-child/h3ulli苹果/lili香蕉/lili橙子/lili梨/lili葡萄/lili西瓜/li/ul/sectionsectionclassspecialh3前三 最后一个特殊/h3ulli置顶公告1/lili置顶公告2/lili置顶公告3/lili普通消息A/lili普通消息B/lili普通消息C/lili重要结尾/li/ul/sectionsectionh3文章首段突出first-of-type/h3articleh2标题/h2p这是第一段会被放大和加绿线。/pp第二段斜体灰色。/pp第三段正常。/pp第四段又斜体灰色。/p/article/sectionsectionclasscardsh33列卡片布局对齐nth-child 3n系列/h3divstylebackground:#e3f2fd;padding:1rem;卡1/divdivstylebackground:#e8f5e9;padding:1rem;卡2/divdivstylebackground:#fff3e0;padding:1rem;卡3/divdivstylebackground:#f3e5f5;padding:1rem;卡4/divdivstylebackground:#e0f7fa;padding:1rem;卡5/divdivstylebackground:#f1f8e9;padding:1rem;卡6/div/sectionsectionclasssingleh3只有一个孩子时特殊样式only-child/h3div只有我一个 → 会变大变蓝/div/sectionsectionclasssingleh3有多个孩子 → 普通/h3div普通A/divdiv普通B/div/section/body/html五、高频面试/实战总结表格/列表隔行变色→:nth-child(odd/even)最常用去掉首/尾边距→:first-child/:last-child去 margin/padding响应式网格最后一行对齐 →:nth-child(3n)/4n等文章排版首段/首图特殊 →:first-of-type面包屑 / 步骤条最后一个不同 →:last-child/:last-of-type避免“幽灵元素”干扰 → 用-of-type更稳当 HTML 结构可能插入其他标签时六、小坑 提示:nth-child(n)的 n 从1开始不是 0这些伪类不考虑 display:none的元素仍然按 DOM 顺序计数特异性都是0,1,0和 class 相同容易被更高特异性覆盖不要滥用复杂公式代码可读性第一下一期预告伪类下—— 交互 状态伪类:hover / :focus / :active / :checked / :disabled / :required …有特别想看的场景或公式欢迎留言祝大家结构伪类用得丝滑
