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

Question

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

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

See linked image 1

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

See linked image 2

如果我为此禁用代码，图标会按我的意愿变为白色，但我很难找到导致问题的位的 .css 文件的位置。

See linked image 3

有人可以帮忙吗？

编辑：从下面的链接可以看出，Wordpress 后端的主题编辑器将图标显示为白色，但它不起作用。

See linked image 4

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

Answer 1

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

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

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

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

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

解决此问题的另一种方法是使用类似 atom 的程序并在整个站点中搜索 color: #92d050 !important; 声明。这样你就可以找到它了。

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

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

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