CSS Peek插件可实现HTML中class/id到CSS定义的快速跳转：安装启用后，支持悬停预览、Option+Click跳转，并需确保CSS文件在工作区且路径正确；若失效，可改用CSS Navigation插件。
如果您在VSCode中编辑HTML文件时希望快速定位到对应CSS类或ID的样式定义，但当前光标悬停或右键点击无法跳转，则可能是CSS Peek插件未正确启用或配置。以下是实现从HTML快速跳转到CSS定义的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用CSS Peek插件
CSS Peek是专为VSCode设计的轻量级插件，可解析HTML中class和id属性，并在悬停时显示对应CSS规则，支持一键跳转至定义位置。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Ctrl+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入CSS Peek，找到作者为Pranay Pratap Singh的插件。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
4、重启VSCode确保插件完全载入。
二、使用悬停预览功能直接查看CSS定义
该方法无需跳转文件，仅通过悬停即可实时查看匹配的CSS规则内容，适用于快速验证样式是否被正确定义。
1、在HTML文件中将光标置于任意class属性值内，例如
2、保持光标静止约500毫秒，弹出悬浮窗口将显示匹配的CSS选择器及其声明块。
3、若存在多个匹配项，悬浮窗会列出全部，点击任一选项即可跳转至对应CSS文件位置。
三、通过快捷键触发跳转
当悬停未自动激活或需强制跳转时，可使用键盘快捷方式直接导航至样式定义源码，提升操作效率。
1、将光标置于HTML中class或id属性的值内部，如class="btn-primary"中的btn-primary。
2、按下快捷键Alt + Click（Windows/Linux）或Option + Click（macOS）。
3、VSCode将立即打开对应CSS文件，并将光标定位至该类或ID的首个定义处。
四、检查CSS文件路径与作用域匹配性
CSS Peek依赖VSCode对项目中CSS资源的静态分析能力，若样式定义位于外部CDN、内联style标签或未被当前工作区包含的文件中，则跳转将失效。
1、确认HTML引用的CSS文件位于VSCode打开的工作区文件夹内，且路径为相对路径（如css/style.css">）。
2、避免使用绝对URL引入CSS，例如href="https://cdn.example.com/style.css"会导致插件无法解析。
3、若使用CSS模块或构建工具（如Vite、Webpack），需确保生成的CSS文件已输出至工作区并可被VSCode索引。
五、替换为CSS Navigation插件作为备选方案
当CSS Peek在复杂项目中响应迟缓或无法识别嵌套选择器时，CSS Navigation提供更鲁棒的选择器解析引擎，支持SCSS、Less及CSS-in-JS语法片段。
1、在扩展市场中搜索CSS Navigation，安装由ChenYiZhi发布的插件。
2、安装后无需额外配置，直接在HTML中对class值执行Ctrl + Click（Windows/Linux）或Cmd + Click（macOS）。
3、插件将优先匹配全局CSS文件，其次查找
