在批量元素的交互样式开发中，CSS的hover伪类和nth-child选择器的组合是非常实用的技巧，能够让我们不用编写额外的JavaScript代码，就实现针对不同位置元素的差异化悬浮效果。这种组合既可以减少代码量，也能提升页面的性能表现。
基础语法说明
nth-child选择器
nth-child用于选择父元素下符合指定位置规则的第N个子元素，常见的参数规则有以下几种：
- 具体数字：比如
nth-child(2)表示选择第二个子元素 - even/odd：even选择偶数位置子元素，odd选择奇数位置子元素
- 公式an+b：比如
nth-child(3n+1)表示选择第1、4、7...个位置的元素，n从0开始递增
hover伪类
hover是鼠标悬浮到元素上时触发的伪类，通常用来修改元素的背景色、边框、阴影等样式，实现交互反馈。
组合逻辑
两者的组合语法为选择器:nth-child(规则):hover，含义是先筛选出符合nth-child规则的元素，再给这些元素添加悬浮时的样式，也可以写成选择器:hover:nth-child(规则)，两种写法的效果一致，前者是更常用的写法。
常见场景示例
场景一：交替悬浮效果
给列表的奇数项和偶数项设置不同的悬浮背景色，实现交替交互效果。
HTML结构如下：
<ul class="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul>
CSS样式如下：
.list li {
padding: 12px 20px;
margin: 5px 0;
background-color: #f5f5f5;
transition: background-color 0.3s ease;
}
/* 奇数项悬浮时背景色为浅蓝 */
.list li:nth-child(odd):hover {
background-color: #e3f2fd;
}
/* 偶数项悬浮时背景色为浅绿 */
.list li:nth-child(even):hover {
background-color: #e8f5e9;
}
场景二：每隔三个元素的不同悬浮效果
给每三个元素为一组，分别设置不同的悬浮样式，比如第一组悬浮放大，第二组悬浮加阴影，第三组悬浮改变文字颜色。
HTML结构如下：
<div class="card-group"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> <div class="card">卡片7</div> <div class="card">卡片8</div> <div class="card">卡片9</div> </div>
CSS样式如下：
.card-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.card {
width: 200px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
transition: all 0.3s ease;
}
/* 3n+1位置的元素悬浮时放大1.05倍 */
.card:nth-child(3n+1):hover {
transform: scale(1.05);
}
/* 3n+2位置的元素悬浮时添加阴影 */
.card:nth-child(3n+2):hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 3n位置的元素悬浮时改变文字颜色 */
.card:nth-child(3n):hover {
color: #ff5722;
}
场景三：特定序号元素禁用悬浮效果
有时候我们需要让前两个元素保持默认样式，不触发悬浮效果，从第三个元素开始启用悬浮交互。
CSS样式如下：
/* 第三个及以后的元素才添加悬浮效果 */
.item:nth-child(n+3):hover {
border-color: #2196f3;
background-color: #f0f7ff;
}
注意事项
- nth-child的计数是从1开始的，不是从0开始，这点很容易和很多编程语言的索引规则混淆
- 如果父元素下存在不同类型的子元素，nth-child会按照所有子元素的顺序计数，不会只筛选指定类型的元素，如果需要只筛选同类型元素，可以使用nth-of-type选择器
- 组合使用时要注意选择器的优先级，避免被其他样式覆盖，必要时可以添加父元素类名提升优先级
- 给交互样式添加transition过渡属性，可以让样式变化更平滑，提升用户体验