:hover用于鼠标悬停时触发样式变化，:first-child匹配父元素下首个子元素；两者结合可实现如首个段落悬停加粗等精细交互，提升用户体验且无需JavaScript。

在网页设计中，:hover 和 :first-child 是两个非常实用的CSS伪类选择器。它们能帮助开发者在不增加JavaScript或修改HTML结构的前提下，实现动态样式和精准定位。下面介绍它们的实际应用技巧。

:hover 交互效果增强

:hover 用于用户将鼠标指针悬停在元素上时触发样式变化，常用于按钮、链接和菜单项的交互反馈。

• 可以用来改变背景色、文字颜色或添加阴影，提升可点击元素的视觉提示。 • 结合 transition 属性，让颜色或尺寸变化更平滑，提升用户体验。 • 不仅适用于 a 标签，也可用于 div、li 等任意容器，创建悬浮卡片或下拉菜单。

示例：当鼠标移到列表项上时背景变灰

li:hover { background-color: #f0f0f0; }

立即学习“前端免费学习笔记（深入）”；

:first-child 定位首个子元素

:first-child 匹配父元素下的第一个子元素，适合对列表、段落组中的首项做特殊样式处理。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 常用于移除第一个元素的多余边距或边框，避免布局错位。 • 可与类选择器组合使用，精确控制特定类型元素的第一个实例。 • 注意：必须是父元素的“第一个”子节点，即使该节点不是同类标签也会失效。

示例：仅给列表中第一项添加红色文字

li:first-child { color: red; }

组合使用技巧

将 :hover 与 :first-child 结合，可以实现更精细的交互逻辑。

• 比如只在第一个列表项悬停时显示删除图标。 • 或在一组图片中，仅第一个图片悬停时放大。

示例：仅第一个段落悬停时字体加粗

p:first-child:hover { font-weight: bold; }

基本上就这些，掌握这两个伪类的选择逻辑和常见场景，能让CSS更简洁高效。关键是理解其匹配规则，避免因HTML结构变动导致样式失效。