css - 使用 CSS 更改 Wordpress 中图标的颜色

我正在使用Dustrial主题构建一个 Wordpress 网站，但在更改前标题栏中的 Font Awesome 图标的颜色时遇到了一些问题。

正如您从屏幕截图中看到的那样，我已将图标 (.h1-single-top-block i.fa) 的颜色更改为 #ffffff，但它已被上面的代码覆盖（颜色：#92d050 !important ;)。

现在我知道 !important 优先，但我找不到此代码所在的文件，因为它告诉我的只是（索引）。

如果我为此禁用代码，则图标确实会根据需要更改为白色，但我很难找到导致问题的位的 .css 文件的位置。

有人可以帮忙吗？

编辑：正如您从下面的链接中看到的那样，Wordpress 后端中的主题编辑器将图标显示为白色，但它只是不工作。

此外，引用它的 (index):237 - 这个文件到底在哪里？后端没有 index.html 文件或类似的文件。

标签： csswordpress

这不是一个特别的 CSS 问题，因为您了解级联的工作方式以及较新的声明会覆盖以前的声明。

您似乎也知道需要删除该(color: #92d050 !important;)声明。

为了找到该声明的发布地点；在 Chrome 开发工具中打开页面（其他开发工具可能类似，但我使用的是 chrome）并专注于有问题的元素。

在右侧，您将看到负责将样式应用于每个元素的样式表。如果您单击它，您将看到它的完整 URL，然后可以进入声明。

如果负责color: #92d050 !important;声明index.html的文件是，则该文件被内联。它可以直接在您header.php的文件中，也可以从单独的 CSS 文件中内联。您必须查看 header.php 才能看到这一点。

解决这个问题的另一种方法是使用像 atom 这样的程序并在整个站点中搜索color: #92d050 !important;声明。这将使yu找到它。

这是一个很好的例子，说明了为什么你应该尽可能少地使用 !important 声明。

我刚刚看到了该网站的链接

覆盖声明在您的索引文件中，并且可能在 header.php 中。如果您没有直接看到它，则应该在 header.php 中引用一些 .css 文件。Override 声明将在这些 CSS 文件之一中。