如何使用Chrome DevTools确定特定样式的来源

Dav*_*Liu 7 css google-chrome google-chrome-devtools

如果我检查网页上的元素并在"度量标准"选项卡中,我看到两边都有10px的边距.我怎么知道这些边缘来自哪里?它们来自默认元素样式还是特定的css文件(在哪一行,它们已被定义)?

SLa*_*aks 9

查看右上角的Computed Style部分.

它将显示应用于元素的每个CSS属性,并带有一个箭头,显示每个属性的应用方式.

  • 如果源(例如main.css)是空白的怎么办?我的页面中有一些第三方脚本可能会添加一些样式,但我无法分辨哪个脚本可能正在执行此操作.另外,在主样式面板中,我看到为每个样式块列出的css文件,但顶部块没有显示文件名.有任何想法吗? (4认同)