通过结合:hover与:nth-of-type选择器，可在悬停父元素或兄弟元素时精准控制特定子元素的样式变化，如ul:hover li:nth-of-type(2)实现列表中第2、4项高亮，或p:hover ~ p:nth-of-type(3)触发后续段落样式改变，配合通用兄弟选择器和层级逻辑，无需JavaScript即可完成动态交互效果。
在现代网页设计中，我们经常需要对特定位置的元素实现悬停交互效果。通过结合 :hover 和 :nth-of-type 选择器，可以精准控制复杂结构中的子元素行为，无需 JavaScript 即可完成动态样式响应。
基本语法理解
:hover 用于定义鼠标悬停时的样式，而 :nth-of-type(n) 可选中父元素下第 n 个指定类型的子元素。两者组合使用时，能实现“当悬停某个父级或兄弟元素时，影响特定位置的子元素”的交互逻辑。
例如，以下代码表示：当容器被悬停时，其内部第3个 p 元素变色：
pre { code { display: block; background: #f4f4f4; padding: 10px; margin: 10px 0; border-radius: 4px; overflow-x: auto; } }p:nth-of-type(3):hover {
color: red;
}
这是直接作用于目标元素本身。但更常见的需求是：悬停一个元素，影响它的某个特定子项或兄弟项。
立即学习“前端免费学习笔记（深入）”；
父容器悬停触发特定子项变化
假设有一个列表，我们希望在鼠标进入整个列表区域时，让其中第2个和第4个列表项高亮显示。
CSS 写法如下：
ul:hover li:nth-of-type(2),
ul:hover li:nth-of-type(4) {
background-color: #ffeb3b;
font-weight: bold;
}
说明：当 ul 被 hover 时，其子元素中第2个和第4个 li 会应用指定样式。这种写法适用于菜单、卡片组等布局中突出关键信息。
相邻兄弟元素的联动控制
有时结构中并非所有元素都是父子关系。比如一组并列的段落，我们想让悬停第一个段落时，第三个段落产生变化。
HTML 结构示例：
第一个段落
第二个段落
第三个段落
CSS 实现：
p:nth-of-type(1):hover ~ p:nth-of-type(3) {
color: blue;
text-decoration: underline;
}
这里利用了通用兄弟选择器（~），表示第一个 p 悬停时，影响它之后的第三个 p。注意 nth-of-type 是按类型计数，不是按类名或其他属性。
结合伪类与动态状态切换
进阶用法中，可配合 :not() 或 :first-of-type 等过滤条件，实现更精细的控制。
例如：悬停任意列表项时，除第1个外的所有其他项透明度降低，形成聚焦效果。
li:hover ~ li,
li:hover + li,
li:hover {
opacity: 0.6;
}
li:hover ~ li:nth-of-type(1),
li:hover + li:nth-of-type(1),
li:nth-of-type(1) {
opacity: 1;
}
或者更简洁地使用反向逻辑：
ul:hover li {
opacity: 0.5;
}
ul:hover li:nth-of-type(2) {
opacity: 1;
}
这表示整体悬停时所有 li 半透明，但第2个始终保持清晰，达到视觉引导目的。
基本上就这些常见模式。关键是理解选择器的匹配逻辑和文档流中的层级关系。合理运用 :hover 与 :nth-of-type 组合，能在不增加 JS 的前提下实现丰富的视觉反馈。
