Chrome开发者工具Styles标签页中的<style>标识指代什么？

Chrome开发者工具Styles标签页中出现的<style>标识，代表当前生效的CSS规则来源于页面内的内嵌<style>标签，而非外部独立CSS文件，也不是元素的行内样式，具体可对应三类常见来源：

• 页面静态内嵌<style>标签：HTML源码中直接编写的<style>样式块，这类静态定义的规则会被DevTools标记为<style>来源
• JS动态生成的<style>标签：前端脚本运行时动态创建并插入DOM的样式标签，CSS-in-JS方案、动态主题切换脚本、前端框架内置样式注入逻辑都常用这种方式实现，这类动态注入的规则同样会被标记为<style>来源
• 浏览器扩展注入的<style>标签：用户安装的浏览器扩展如果有修改页面样式的逻辑，大多会通过往页面插入内嵌<style>标签的方式注入自定义规则，这类扩展注入的样式也会显示为<style>来源

行内样式在Styles面板中会单独标记为inline，和<style>来源的规则完全独立，因此元素无行内样式时出现该标识属于正常情况。如果需要定位具体对应的样式来源，直接点击Styles面板中的<style>标识，即可跳转到Sources面板查看对应的完整样式内容，也可在Elements面板的DOM树中检索<style>标签核对匹配。

内容的提问来源于stack exchange，提问作者rory.ap