HTML/CSS: <a> 标记 CSS 规则 w/伪类呈现不一致
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5502529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: <a> tag CSS rules w/ pseudoclasses rendering inconsistently
提问by Mike Turley
I've come across an issue lately with my web design projects that has been insignificant enough to slip through my fingers unfixed a few times, but it's just gotten too annoying.
我最近在我的网页设计项目中遇到了一个问题，这个问题已经微不足道了，几次未修复就从我的手指间溜走，但它变得太烦人了。
Say I have a style sheet with these rules:
假设我有一个包含这些规则的样式表：
a {
outline: 0;
text-decoration: underline;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #33FF66;
}
Links in my document will only sometimeshave the correct colors, but sometimes they will just be the default blue->purple links. I'm on a black background, so these look awful.
我的文档中的链接有时只有正确的颜色，但有时它们只是默认的蓝色->紫色链接。我是黑色背景，所以这些看起来很糟糕。
If I refresh the page, about half the time they will render correctly. This is happening in both Firefox and Chrome.
如果我刷新页面，大约有一半的时间它们会正确呈现。这发生在 Firefox 和 Chrome 中。
What's going on?
这是怎么回事？
回答by Hugo Migneron
If you are currently developing your css, it is very possible that the browsers have a cached version of the wrong version of the style sheet, which would explain why your links don't display correctly.
如果您当前正在开发 css，很可能浏览器缓存了错误版本的样式表，这将解释为什么您的链接无法正确显示。
Try the following : In your link to the css, add a query string with garbage values. This will force the re-download of the css and see if your rules apply consistently. If they do, then you know it is a caching problem. Leave the query string as is and your users will re-download the css. If not, then you have a css problem. Download firebug for firefox, check one of the links that doesn't display the right color and see what rules apply to it.
尝试以下操作：在指向 css 的链接中，添加带有垃圾值的查询字符串。这将强制重新下载 css 并查看您的规则是否一致。如果他们这样做，那么您就知道这是一个缓存问题。保持查询字符串不变，您的用户将重新下载 css。如果没有，那么你有一个 css 问题。为 firefox 下载 firebug，检查未显示正确颜色的链接之一，并查看适用于它的规则。
Here is how you would add the query string :
以下是添加查询字符串的方法：
<link rel="stylesheet" type="text/css" href="style.css?v=3">
回答by jhfelectric
Of course this is an old post, but I have been experiencing the same issues lately. After some hours searching, I finally realized that my markup was invalid because using the following syntax:
当然，这是一个旧帖子，但我最近遇到了同样的问题。经过几个小时的搜索，我终于意识到我的标记无效，因为使用了以下语法：
<a href="somlink"><i>my link text</i></a>
This renders perfectly in all browsers but of course the 'a' selector in my style sheet was not enough. In this case, I needed the following:
这在所有浏览器中都能完美呈现，但当然我的样式表中的“a”选择器是不够的。在这种情况下，我需要以下内容：
a i, a:hover i, a:visited i
{
some rule....
}
Hope this can help someone...
希望这可以帮助某人...
回答by Luke Duddridge
Sounds very odd.
听起来很奇怪。
First off I would put a coloron your base ato match your a:linkand a:visited:
首先，我会color在您的基础上放置一个a以匹配您的a:link和a:visited：
a {
outline: 0;
text-decoration: underline;
color: #0099FF;
}
This should apply to every anchor tag it finds. if you have an anchor tag without an href the a:linkwont apply.
这应该适用于它找到的每个锚标记。如果您有一个没有 href 的锚标记，则将不a:link适用。
