Chrome用户代理样式表覆盖我的网站样式 [英] Chrome user agent stylesheet overwriting my site style

问题描述

我有以下CSS样式链接我的一个页面：

I have the following CSS that styles the link on one of my pages:

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

但是，当我加载它时，它们在Chrome中显示为蓝色，在Firefox中显示为白色。 Chrome开发工具显示我的样式应该覆盖用户代理样式表：

However, when I load it, they appear blue in Chrome and white in Firefox. The Chrome dev tools reveal that my style supposedly overwrites the user agent stylesheet:

为什么它无法正常显示？我尝试在样式表的顶部设置字符集：

Why is it not showing correctly? I tried setting the charset at the top of my stylesheet:

@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 11px "Lucida Grande", Arial, Sans-serif;
}

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

input[type=email], input[type=password] {
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ACE;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 5px;
    width: 203px;
}

但它没有帮助。我的样式表链接在头部：

But it didn't help. My stylesheet is linked in the head with:

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

链接的HTML代码：

<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>

这是他们在Chrome（13.0.782）中的样子 - 不正确：

This is what they look like in Chrome (13.0.782) - incorrect:

这是他们在Firefox中的样子 - 正确：

This is what they look like in Firefox - correct:

看起来用户代理样式表正在覆盖我的样式。为什么？

It looks like the user agent stylesheet is overwriting my style. Why?

推荐答案

Vonkly帮助识别了问题。我去挖掘所有的样式表，我发现一个错字，其中之一，它在定义标题的链接风格时缺少父元素，所以代替

Vonkly helped identify the issue. I went digging through all my stylesheets and I found a typo, sort of, in one of them - it was missing the parent element when defining the link style for the header, so instead of

header a:link, header a:visited {
...
}

我有

header a:link, a:visited {
...
}

因此它覆盖了我为链接在身体。第一次查看我的样式表时，我一定错过了。

so it was overriding the style I defined for the links in the body. I must have missed it while reviewing my stylesheets the first time around.

感谢您的意见，大家！

这篇关于Chrome用户代理样式表覆盖我的网站样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！