html - 通过Chrome DevTools挑出CSS代码后，找出网页中使用的CSS代码？

Question

我正在使用 Chrome DevTools Coverage 选项卡来检查网页 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，然后输入类名“aligncenter”，找到的第一个如下:

似乎有两个文件在其 CSS 规则中使用了相同的类名“aligncenter”。由于块库 CSS 来自 Gutenberg 编辑器，而 style.css 由开发网站的公司开发。很有可能应该删除块 CSS。但是，我想进一步了解是否有找到这种情况的方法或工具，即多个 CSS 文件使用与选择器相同的类名(CSS 类名冲突) ?我想这种情况在大型网站中应该是比较常见的。
此外，在搜索 aligncenter 的第二个实例时，我得到以下结果:

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

Answer 1

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

编辑

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

嗯，在某些情况下，多个 CSS 文件可以在同一个类元素上应用样式。这分为2类:

将不同样式应用于同一类的一种

将相同样式应用于同一类的那个

在第一种情况下，没有问题，两种样式都将应用。要跟踪这些样式规则，您需要检查这两个文件。
在第二种情况下，样式将被最后一条规则应用，因此系统最后读取(示例如下)

此外，在第二张截图中，您可以看到具有“无应用样式”的元素根本不存在，并且不是真正的元素而是字符串

您可以在此屏幕截图中看到图像元素写在双引号之间，并不代表真正的 HTML 元素。所以不会应用任何样式