通过Chrome DevTools Pick出CSS代码后，找出网页中哪里使用了CSS代码？

Find out where the CSS codes are used in the web page after Pick out them via Chrome DevTools?

我正在使用 Chrome DevTools Coverage 选项卡来检查 wegpage https://www.datanumen.com/outlook-repair/ 上 CSS 文件的使用部分，如下所示：

在 CSS 文件中 https://www.datanumen.com/wp-includes/css/dist/block-library/style.min.css?ver=5.8,
3000行中，只用了3行。但是如何找出这些 CSS 规则在源 HTML 页面中应用的位置？

更新

我转到“元素”选项卡，然后按Ctrl + F，然后输入class名称“aligncenter”，找到的第一个如下：

似乎有两个文件在其 CSS 规则中使用相同的 class 名称“aligncenter”。由于块库CSS来自古腾堡编辑器，而style.css是由开发网站的公司开发的。块 CSS 很可能应该被删除。但是，我想进一步了解是否有一种方法或工具可以找到这种情况，即 多个 CSS 文件使用相同的 class 名称作为选择器（CSS class 名字冲突)?我想这种情况在大型网站中应该比较常见。

此外，当搜索 aligncenter 的第二个实例时，我得到以下结果：

它说“没有匹配的选择器或样式”，为什么？

嘿，不要去源选项，进入元素选项卡并查看您正在搜索的规则，按下它，在右侧您可以看到哪个文件应用了该样式，以及在哪一行.就像下面的截图（只是一个例子）

编辑

2 CSS files use the same class name for the same CSS rule, how to find such a case?

好吧，在某些情况下，多个 CSS 文件可以在同一个 class 元素上应用样式。这分为两类：

  1. 同一种风格应用不同的风格class
  2. 将相同的样式应用到相同的class

第一种情况没有问题，两种样式都会应用。要跟踪这些样式规则，您需要检查这两个文件。

在第二种情况下，样式将由最后一条规则应用，因此系统最后一次读取（下面的示例）

此外，在第二张截图中，您可以看到“未应用样式”的元素根本不存在，并且不是真正的元素而是字符串 您可以在此屏幕截图中看到图像元素写在双引号之间，并不代表真正的 HTML 元素。所以不会应用任何样式