Chrome DevTools中CSS类提示的来源及学习检查方法咨询

一、类提示的来源 #

• 已加载的静态CSS资源：页面中所有通过<link>引入的外部CSS文件、<style>标签内定义的类，都会被DevTools自动收录进提示列表。
• 动态注入的样式类：通过JavaScript动态创建的<style>块、或者用CSSOM API生成的CSS类，只要已经在页面中生效，也会出现在提示里。
• 用户代理样式（极少）：部分浏览器自带的默认样式中包含的类，但这类占比极低，主要还是页面自定义的样式类。

二、检查与学习这些类的方法 #

• 悬停查看类规则：在.cls输入框的下拉提示中，把鼠标悬停在目标类上，会弹出弹窗显示该类的完整CSS规则，以及定义该类的文件路径和行号。
• 跳转至类定义：点击提示中的类名，或者弹窗里的文件链接，直接跳转到Sources面板对应的CSS文件位置，查看类定义的上下文（比如周围的其他样式、媒体查询等）。
• 测试类的生效效果：给元素添加类后，在Elements面板的Style标签下，能看到该类的所有样式规则，还可以通过勾选/取消规则前的复选框，实时测试样式的变化。
• 全局搜索类的使用场景：按下Ctrl+Shift+F（Windows/Linux）或Cmd+Shift+F（Mac）打开全局搜索框，输入类名，就能找到所有引用这个类的HTML、CSS、JS文件，了解它在项目中的使用情况。

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