我有以下 CSS 样式设置我的其中一个页面上的链接:
a:link, a:visited, a:active {
color: white;
text-decoration: none;
font-weight: bold;
}
但是,当我加载它时,它们在 Chrome 中显示为蓝色,在 Firefox 中显示为白色。 Chrome 开发工具显示我的样式应该会覆盖用户代理样式表:
为什么显示不正确?我尝试在样式表顶部设置字符集:
@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;
}
但这没有帮助。我的样式表在头部链接:
<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) 中的样子 - 不正确:
这是它们在 Firefox 中的样子 - 正确:
看起来用户代理样式表正在覆盖我的样式。为什么?
原文由 TK Gospodinov 发布,翻译遵循 CC BY-SA 4.0 许可协议
Vonkly 帮助确定了问题。我仔细研究了我所有的样式表,发现其中一个有错别字——在定义标题的链接样式时它缺少父元素,所以而不是
我有
所以它覆盖了我为正文中的链接定义的样式。我一定是在第一次检查我的样式表时错过了它。
谢谢大家的意见!