当我 "Inspect" 页面不在我所写内容的任何位置并导致文本颜色为 "wrong," 时，我会显示代码，我该如何解决这个问题？

Question

我在 css 中适当地 div 使用了颜色属性，但它没有改变屏幕上的颜色。不知道发生了什么，我终于去了 Inspect，并且出现了我没有包含在我的 html 文件中任何地方的代码。我不知道它是如何到达那里的，以及如何覆盖或删除它。

这是我找到的代码，我没有在任何地方写过：

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

它注明了“用户代理样式表”，但同样，我没有写过这样的东西。为了以防万一，我在代码中搜索了“webkit”，但没有结果。请帮助我了解这是从哪里来的，以及我可以做些什么来改变颜色（因为它实际上不在我的代码中的任何地方）。

谢谢！

Answer 1

该代码是您的浏览器提供的默认样式（因此称为“用户代理样式表”）。

如果您想覆盖它，您必须为元素编写自己的样式。

在这种情况下：

a {
    color: #0066cc;
}

如果您只想设置某些链接的样式，您可以向它们添加类：

a {
  color: #0066cc;
}

a.different-color {
    color: #cc1100;
}

<a href="#">A link</a><br />
<a href="#">A link</a><br />
<a href="#" class="different-color">A link with different color</a><br />
<a href="#">A link</a><br />

为了避免 user-agent 样式表覆盖您自己的样式表，请尽可能具体（它也是 CSS best-practice）。特定的选择器将避免 side-effects（例如无意中设置了其他元素的样式）。

另见 this question and answer

当我 "Inspect" 页面不在我所写内容的任何位置并导致文本颜色为 "wrong," 时，我会显示代码，我该如何解决这个问题？

I have code showing up when I "Inspect" the page that isn't anywhere in what I've written and causing text color to be "wrong," how do I fix this?

html

css

webkit