HTML/CSS:标签 CSS 规则与伪类渲染不一致

发布于 2024-10-29 04:48:51 字数 454 浏览 1 评论 0原文

最近,我在网页设计项目中遇到了一个问题,这个问题微不足道,多次从我的手指间溜走而未修复,但它实在太烦人了。

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

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

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

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

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

这是怎么回事?

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 sometimes have 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.

What's going on?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

静水深流 2024-11-05 04:48:51

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

尝试以下操作:
在 CSS 链接中,添加包含垃圾值的查询字符串。这将强制重新下载 CSS 并查看您的规则是否一致适用。如果这样做,那么您就知道这是一个缓存问题。保留查询字符串不变,您的用户将重新下载 CSS。
如果没有,那么你就有了 css 问题。下载适用于 Firefox 的 Firebug,检查未显示正确颜色的链接之一,并查看适用于它的规则。

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

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

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.

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.

Here is how you would add the query string :

<link rel="stylesheet" type="text/css" href="style.css?v=3">
手长情犹 2024-11-05 04:48:51

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

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

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

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

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

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 i, a:hover i, a:visited i
   {
       some rule....
   }

Hope this can help someone...

彡翼 2024-11-05 04:48:51

听起来很奇怪。

首先,我会在您的基础 a 上放置一个 color 以匹配您的 a:linka:visited

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

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

Sounds very odd.

First off I would put a color on your base a to match your a:link and 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:link wont apply.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文