: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 匹配父元素下的第一个子元素，适合对列表、段落组中的首项做特殊样式处理。
• 常用于移除第一个元素的多余边距或边框，避免布局错位。 • 可与类选择器组合使用，精确控制特定类型元素的第一个实例。 • 注意：必须是父元素的“第一个”子节点，即使该节点不是同类标签也会失效。示例：仅给列表中第一项添加红色文字
li:first-child { color: red; }
组合使用技巧
将 :hover 与 :first-child 结合，可以实现更精细的交互逻辑。
• 比如只在第一个列表项悬停时显示删除图标。 • 或在一组图片中，仅第一个图片悬停时放大。示例：仅第一个段落悬停时字体加粗
p:first-child:hover { font-weight: bold; }
基本上就这些，掌握这两个伪类的选择逻辑和常见场景，能让CSS更简洁高效。关键是理解其匹配规则，避免因HTML结构变动导致样式失效。
