使用 :hover 与 :nth-child() 组合可精准控制特定子元素的悬停样式，如 li:nth-child(2):hover 设置第二个 li 悬停时背景变黄，适用于奇偶项差异化交互、间隔选择等场景，结合 transition 可实现平滑动画效果，提升用户体验。
在网页开发中，我们经常需要对特定位置的元素添加交互效果。使用 :hover 和 :nth-child() 结合，可以精准控制某类子元素在鼠标悬停时的样式表现，无需JavaScript即可实现动态视觉反馈。
基本语法理解
:hover 用于定义鼠标指针悬停在元素上时的样式。:nth-child(n) 是结构伪类，用来匹配父元素下的第 n 个子元素。两者组合可实现“当鼠标移到第几个子元素上时，应用特定样式”。
基本写法如下：
li:nth-child(2):hover {background-color: yellow;
}
这段代码表示：只有当列表中的第二个 li 被悬停时，背景变为黄色。
立即学习“前端免费学习笔记（深入）”；
常见应用场景
这种组合特别适用于以下几种情况：
- 仅对奇数项设置悬停高亮：
li:nth-child(odd):hover { background: #f0f0f0; } - 对偶数项进行动画过渡：
div:nth-child(even):hover { transform: scale(1.1); transition: 0.3s; } - 选择特定间隔的元素（如每第三个）：
section:nth-child(3n):hover { border-left: 3px solid blue; } - 排除前几项后添加交互：
li:nth-child(n+4):hover { color: red; }（从第4个开始生效）
增强用户体验的小技巧
为了让交互更自然，建议配合 transition 使用，使样式变化平滑过渡。
.item:nth-child(2n+1):hover {background-color: #e0ffe0;
transform: translateY(-2px);
transition: all 0.2s ease;
}
这样，用户悬停在奇数项上时，会有轻微上浮和颜色变化，提升界面活力。
注意：确保选择器优先级足够，避免被其他样式覆盖。若无效，可检查HTML结构是否符合预期，比如是否存在非目标标签的兄弟元素干扰 :nth-child 计算。
