HTML/CSS：<a> 标记 CSS 规则，其中伪类呈现不一致答案

【问题标题】：HTML/CSS: <a> tag CSS rules w/ pseudoclasses rendering inconsistentlyHTML/CSS：<a> 标记 CSS 规则，其中伪类呈现不一致
【发布时间】：2011-07-27 00:41:46
【问题描述】：

我最近在我的网页设计项目中遇到了一个问题，这个问题微不足道，以至于我几次无法解决，但它变得太烦人了。

假设我有一个包含以下规则的样式表：

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

我文档中的链接仅在某些时候具有正确的颜色，但有时它们只是默认的蓝色->紫色链接。我的背景是黑色的，所以这些看起来很糟糕。

如果我刷新页面，大约一半的时间它们会正确呈现。 Firefox 和 Chrome 都会出现这种情况。

发生了什么事？

【问题讨论】：

尝试组合a:link, a:visited，因为它们的颜色相同？
除了合并你的 :link 和 :visited 之外，css 看起来还不错。你如何包括你的CSS？听起来您的页面有时会加载 css 文件，有时不会。
肯定只是 <a> 标签的 CSS 应用不一致，还是所有元素？
为自己获取 Firefox 的 Firebug 扩展 - 它非常适合追踪此类内容...
你能告诉我更多关于设置的信息吗，你有服务器场吗？是否只有链接颜色受到影响？还是有更多样式恢复为不同/默认样式？

标签： html css anchor pseudo-class

【解决方案1】：

当然这是一篇旧帖子，但我最近也遇到了同样的问题。经过几个小时的搜索，我终于意识到我的标记是无效的，因为使用了以下语法：

<a href="somlink"><i>my link text</i></a>

这在所有浏览器中都能完美呈现，但我的样式表中的“a”选择器当然是不够的。在这种情况下，我需要以下内容：

   a i, a:hover i, a:visited i
   {
       some rule....
   }

希望这可以帮助某人...

【讨论】：

【解决方案2】：

如果您当前正在开发您的 css，浏览器很可能缓存了错误版本的样式表，这可以解释为什么您的链接无法正确显示。

尝试以下方法：在指向 css 的链接中，添加一个带有垃圾值的查询字符串。这将强制重新下载 css 并查看您的规则是否始终适用。如果他们这样做了，那么您就知道这是一个缓存问题。保持查询字符串不变，您的用户将重新下载 css。如果没有，那么你有一个CSS问题。为 firefox 下载 firebug，检查其中一个未显示正确颜色的链接，并查看适用于它的规则。

以下是添加查询字符串的方法：

<link rel="stylesheet" type="text/css" href="style.css?v=3">

【讨论】：

Hugo，我以为浏览器会将style.css 和style.css?ver=3 读取为不同的，但在遇到相同的查询字符串时不会重新下载样式表。直到你改变它。你有不同的想法吗？
你是对的（据我所知）。如果要使缓存无效，则必须更改查询字符串。
哦，太好了。我一度担心我今年建立的每个网站都会在每次刷新时重新加载 CSS。谢谢。

【解决方案3】：

听起来很奇怪。

首先，我会在您的基础a 上放置一个color 以匹配您的a:link 和a:visited：

a {
    outline: 0;
    text-decoration: underline;
    color: #0099FF;
}

这应该适用于它找到的每个锚标记。如果你有一个没有 href 的锚标记，a:link 将不适用。

【讨论】：