本文旨在解决当鼠标悬停在一个容器上时，如何仅对当前悬停的子元素应用 CSS 样式（如 outline），而不是影响所有后代元素。通过使用 CSS 选择器，我们可以精确控制 hover 效果的作用范围，实现更精细的交互设计。
在 CSS 开发中，我们经常需要为鼠标悬停的元素添加一些视觉反馈，例如 outline。但有时，我们只想对当前悬停的元素应用样式，而不是影响其所有后代元素。本文将介绍如何使用 CSS 选择器实现这一目标，确保 hover 效果只作用于目标元素本身。
使用子选择器（>）
CSS 的子选择器（>）允许我们选择指定元素的直接子元素。这在我们需要精确控制样式的应用范围时非常有用。
例如，假设我们有以下 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container">
<span>
<span>Hover me!</span>
</span>
</div>如果我们想要仅在鼠标悬停在第一个 span 元素上时添加 outline，可以使用以下 CSS：
.container > span:hover {
outline: 1px dashed black;
font: sans-serif;
white-space: pre;
}在这个例子中，.container > span:hover 选择器只会选择 .container 元素的直接子元素 span，并且只有当鼠标悬停在这个 span 元素上时，才会应用 outline 样式。内部的 span 元素不会受到影响。
选择不同层级的子元素
我们可以通过添加更多的子选择器来选择更深层级的子元素。例如，如果我们想要选择第二个 span 元素，可以使用以下 CSS：
.container > span > span:hover {
outline: 1px dashed black;
font: sans-serif;
white-space: pre;
}这个选择器会选择 .container 的直接子元素 span 的直接子元素 span，并且只有当鼠标悬停在这个最内层的 span 元素上时，才会应用 outline 样式。
完整示例
以下是一个完整的示例，展示了如何使用子选择器来控制 hover 效果：
<!DOCTYPE html>
<html>
<head>
<style>
.container > span:hover {
outline: 1px dashed black;
font: sans-serif;
white-space: pre;
}
.hljs-tag {
color: #333;
}
.hljs {
background: #fff;
color: #333;
}
.hljs-name, .hljs-section {
color: #63a35c;
}
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
color: #6f42c1;
}
</style>
</head>
<body>
<div class="container">
<span>Hover me!</span>
<span>
<span>Hover me too!</span>
</span>
</div>
</body>
</html>在这个示例中，只有第一个 span 元素在鼠标悬停时会显示 outline。第二个 span 元素及其内部的 span 元素不会受到影响，因为我们的 CSS 选择器只针对 .container 的直接子元素 span。
注意事项
- 选择器的优先级： 确保你的选择器具有足够的优先级，以覆盖其他可能影响样式的 CSS 规则。
- 性能考虑： 复杂的选择器可能会影响性能，特别是在大型页面上。尽量保持选择器简洁高效。
- 可维护性： 使用清晰、易于理解的选择器，以便于代码的维护和修改。
总结
通过使用 CSS 子选择器（>），我们可以精确控制 hover 效果的作用范围，只为当前悬停的元素应用样式。这使得我们能够创建更精细、更可控的交互体验，避免不必要的样式冲突和视觉干扰。在实际开发中，根据具体的 HTML 结构和需求，灵活运用子选择器，可以实现各种复杂的 hover 效果。
