答案：结合:hover与:nth-child()可实现悬停时特定子元素变色放大、兄弟元素模糊、奇偶行不同背景及逐个高亮动画，提升交互体验。
在网页设计中，实现复杂的交互样式常常需要结合 :hover 和 :nth-child() 伪类。这种组合能让你精准控制特定位置的元素在悬停时的表现，无需JavaScript即可增强用户体验。下面介绍几种实用且常见的用法。
1. 鼠标悬停时改变特定子元素的样式
当你希望鼠标悬停在父容器上时，只对第n个子元素应用样式变化，可以这样写：
.container:hover .item:nth-child(3) {
background-color: #ff6b6b;
transform: scale(1.1);
}
说明：当鼠标移到 .container 上时，其内部第三个 .item 元素会变色并放大。这种写法适用于轮播图、导航菜单或卡片布局中的重点突出。
2. 悬停某个子元素时影响其他兄弟元素
利用相邻选择器或通用兄弟选择器，可以让某个元素的悬停状态影响它后面的特定兄弟元素。
立即学习“前端免费学习笔记（深入）”；
.item:hover ~ .item:nth-child(n+4) {
opacity: 0.6;
filter: blur(2px);
}
说明：当某个 .item 被悬停时，它之后所有从第4个开始的兄弟元素变得模糊且半透明。这适合用于“聚焦当前，弱化其余”的视觉效果。
3. 结合奇偶行与悬停实现更细腻的表格样式
在表格或列表中，可以同时使用 :nth-child(odd)、:nth-child(even) 和 :hover 来打造层次分明的交互体验。
tr:nth-child(odd):hover {
background-color: #ffeaa7;
}
tr:nth-child(even):hover {
background-color: #fab1a0;
}
说明：奇数行和偶数行在悬停时显示不同颜色背景，提升可读性和美观度。也可用于商品列表、数据面板等场景。
4. 实现“逐个高亮”动画效果
通过结合 :hover 和 :nth-child(n) 的延迟生效，可以创建一种“波浪式”进入的高亮动画。
.group:hover .box {
transition: all 0.3s ease;
}
.group:hover .box:nth-child(1) { transform: translateY(-5px); }
.group:hover .box:nth-child(2) { transition-delay: 0.1s; transform: translateY(-5px); }
.group:hover .box:nth-child(3) { transition-delay: 0.2s; transform: translateY(-5px); }
说明：当悬停到 .group 容器时，每个 .box 依次上移，形成动态反馈。适合用在按钮组、图标栏等强调顺序的区域。
基本上就这些。关键在于理解选择器的层级关系和匹配逻辑。只要结构清晰，CSS完全能胜任多数基础交互需求。不复杂但容易忽略细节，比如空格和符号的使用是否正确。多试几次，效果自然出来。
