检查器中的 CSS 元素显示错误的代码行？答案

【问题标题】：CSS elements in inspector displaying wrong code line?检查器中的 CSS 元素显示错误的代码行？
【发布时间】：2018-12-15 20:29:29
【问题描述】：

这里是新的网络开发学生。我在检查员中寻找我网页的某些元素。但是，一旦我找到元素，它就会显示它所属的 CSS 文件和行。但是，当我转到 CSS 文件并查找元素时，它不在该行上。我在这里遗漏了什么吗？

查看图片中的.carousel-inner。两者都告诉我他们正在使用的不同代码行。但是当我在文本编辑器中访问我的 CSS 文件时，这些元素不在检查员告诉我的相应行上。

【问题讨论】：

引导 css 很大。你真的滚动到第 6252 行吗？这些行号可能指的是其他元素（img 和其他）。转到 css 并执行简单的“查找”以找到 .carousel-inner。
我 Ctrl "f" 编辑它并找到正确的 ".carousel-inner" 元素，并且我做出了正确的更改。但是，一旦我保存了文件并刷新了站点，检查器仍然在错误的行上显示该元素，没有任何更改！我什至回去仔细检查更改是否正确进行并保存。
在我链接的图片中。为什么两个完全相同的元素在不同的行上？为什么检查器将两个相同的元素显示为不同的元素？
您是否在文档中包含了多个bootstrap.css 文件？不同版本的引导程序？很难说出问题是什么（如果这里有实际问题），但它在你身边，而不是开发人员工具中的错误

【解决方案1】：

请记住，在生成的 CSS 文件中，同一个定义可以有多行。可能发生的情况是，您正在检查同一类的定义，但针对的是不同的媒体查询。

我建议您查找定义的所有实例，看看哪一个反映了更改。

【讨论】：

我相信是这样的。当我将鼠标悬停在检查器中的 css 文件上时，一种状态是本地保存，另一种状态是它的位置是maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css:4166。在检查器中，当我进行更改时，某些更改仅在编辑保存到长链接位置的元素时才能正常工作。但是我只能访问本地保存的 css 文件。有没有办法解决这个问题？
好的，所以你的问题是你在本地编辑一些东西，但包括一个远程文件。在这种情况下，您将包含一个托管在 Bootstrap 的 MaxCDN 上的文件。您应该将包含的文件更改为本地文件，这就是您的修改没有被反映的原因。
绝对是这样。但是我不确定如何将它包含在我的本地文件中。
样式通常包含在代码的<head> 部分中。您应该寻找类似于以下内容的行：<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" /> 我建议您仅搜索href="https://maxcdn，以防它包含的方式与我提到的不同。然后只需将href 更改为与您的项目相关的那个。
非常感谢！似乎正是“错误”。

【解决方案2】：

你的 css 文件中的 ctrl+f 应该可以工作

【讨论】：

我 Ctrl "f" 编辑它并找到正确的 ".carousel-inner" 元素，并且我做出了正确的更改。但是，一旦我保存了文件并刷新了站点，检查器仍然在错误的行上显示该元素，没有任何更改！我什至回去仔细检查更改是否正确进行并保存。在我链接的图片中。为什么两个完全相同的元素在不同的行上？为什么检查器将两个相同的元素显示为不同的元素
Bootstrap 文件有时是从 scss 文件预先转换的，这些文件可能会错误地显示该行，或者您没有此文件的兼容版本。例如我自己的 style.css 文件正确地指示了代码的行。这是我的看法，所以我不知道这是否是真实的解释。