如何在Visual Studio中查找HTML引用的缺失CSS规则集

方法一：使用Visual Studio内置CSS诊断 #

这是最便捷的原生方案，无需额外安装工具：

1. 打开Visual Studio，依次点击工具 -> 选项 -> 文本编辑器 -> HTML -> 高级
2. 找到并勾选启用CSS诊断选项
3. 回到.cshtml或HTML文件，未定义的CSS类名下方会显示红色波浪线；同时打开错误列表窗口（视图 -> 错误列表），能看到所有未定义类的提示，点击可直接定位到对应代码位置

这个功能会自动识别当前文件的<style>标签、项目中链接的本地CSS文件里的类选择器，常规场景下足够使用。

方法二：借助第三方扩展增强检测能力 #

如果需要跨项目文件、更全面的静态分析，可以用以下扩展：

• ReSharper/Rider：JetBrains的工具会对HTML中的CSS类做全局静态检查，不仅能识别未定义的类，还能检测未使用的CSS规则，支持批量扫描整个项目，定位问题更高效
• HTML Validator：专门的HTML语法检查扩展，能将未定义CSS类作为错误或警告提示，支持自定义检查规则
• CSS Peek：除了跳转CSS定义，也会标记未找到定义的类名，适合快速排查单个类的问题

方法三：手动正则查找+对比（无工具依赖） #

如果不想用扩展，可通过正则提取类名后对比：

1. 提取HTML中的所有类名：打开VS的查找窗口（Ctrl+F），切换到正则表达式模式，使用正则class="([^"]+)"|class='([^']+)'，点击查找全部，将结果导出到文本文件，整理去重得到所有引用的类名列表
2. 提取CSS中的所有类选择器：在CSS文件中用正则\.([a-zA-Z0-9_-]+)\s*{查找所有类定义，同样导出整理去重得到已定义的类名列表
3. 对比差集：用VS的文件对比工具（工具 -> 比较文件）或Excel的差集函数，找出只在HTML列表中存在的类，就是未定义的引用

注意事项 #

• 动态生成的类（如后端绑定的@Model.CssClass）属于运行时内容，静态检测工具无法识别，需要手动排查这类场景
• 如果引用了外部CDN的CSS文件，建议将文件下载到本地并添加到项目中，或通过VS的添加现有项引用远程文件（需配置），否则工具会误判为未定义类

内容的提问来源于stack exchange，提问作者MyDaftQuestions