我可以使用 Chrome 开发工具来查找 CSS 属性或值是在哪个文件中定义的吗？

Question

我正在查看网页上的一个元素，试图弄清楚它是如何工作的。

它的text-align属性是var(--btn-default-text-alignment, center)，计算的样式是left，所以我猜测--btn-default-text-alignment变量设置为left。

但是这个 CSS 变量从哪里来呢？我查看了定义样式的文件，但找不到它。我发现一个文件中的 CSS 变量可以被其他文件使用，因此它可能位于该页面包含的众多 CSS 文件之一中，但是查看所有这些文件并找到它会是一项繁琐的工作。

有没有办法使用 Chrome 开发工具来找出 CSS 变量是在哪个文件中定义的？

Answer 1

在下图中，我选择并检查了页面标题“我可以使用 Chrome 开发...定义吗？”。在检查器工具的左下象限/框中，我们可以看到所有 CSS 变量以及它们所在的文件。例如，CSS 元素#question-header位于 file 中primary.css。

如果单击文件名，primary.css您还可以看到文件夹结构和文件的实际内容。

从这里，您可以按 Ctrl+F 查找存在某些内容的所有实例。第一个实例将位于定义它的位置。

火狐浏览器也有这个功能。