CSS 将 a:visited 链接设置为与 a:link 和 a:hover 相同的状态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/303440/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:07:01  来源:igfitidea点击:

setting a:visited link to same state as a:link and a:hover

csshyperlink

提问by Zack The Human

I'm working on a idea where my a:link have one state (blue, no underline etc) with a a:hover being white. I want my visited links to have the same stateas a:linkand a:hover. Is this possible? supported in most common browsers?

我正在研究一个想法,我的 a:link 有一个状态(蓝色,没有下划线等),而 aa:hover 是白色的。我希望我访问过的链接具有相同的状态a:linka:hover。这可能吗?大多数常见浏览器都支持吗?

回答by phihag

a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}

should work on all CSS-enabled browsers, although this is a bad idea(currently offline, Google Cache)

应该适用于所有支持 CSS 的浏览器,尽管这是一个坏主意(目前离线,谷歌缓存

To make a:hoverwhite, either remove it from the above rule and make a special rule for it or add just:

要制作a:hover白色,请将其从上述规则中删除并为其制定特殊规则或仅添加:

a:hover {color: white !important;}

回答by Zack The Human

It's completely possible as sblundy points out. However, if you make a rule like that there will no longer be any visual cue that the user is hovering over a link that was previously visited.

正如 sblundy 指出的那样,这是完全可能的。但是,如果您制定了这样的规则,将不再有任何视觉提示,表明用户将鼠标悬停在先前访问过的链接上。

Also, remember to specify the rules in this order:

另外,请记住按以下顺序指定规则:

a:link { }
a:visited { }
a:hover { }
a:active { }

Otherwise you may have unexpected results because all of these rules have the same specificity. The order is important.

否则,您可能会得到意想不到的结果,因为所有这些规则都具有相同的特异性。顺序很重要。

EDIT: CSS2 allows the chaining together of pseudo-classes. This could be used to fix the [potential] usability problem your request creates.

编辑:CSS2 允许将伪类链接在一起。这可用于修复您的请求造成的 [潜在] 可用性问题。

a:visited:hover { }

However, I don't know if this convention is widely supported.

但是,我不知道这个约定是否得到广泛支持。

回答by One Crayon

The mnemonic I was taught for remembering which order to put your CSS links in is "LoVe HAte": link, visited, hover, active.

我教过的助记符是“LoVe HAte”:链接、访问、悬停、活动。

Sticking :focus in there is usually not a bad idea, as well.

坚持 :focus 在那里通常也不是一个坏主意。

Of course, if you're making all states of a link look the same by listing selectors with commas, then the order doesn't matter.

当然,如果您通过用逗号列出选择器来使链接的所有状态看起来都相同,那么顺序无关紧要。

回答by Marc Charbonneau

Here's how you can style the a tags (normal and visited) and style the hover separately.

以下是如何设置 a 标签(正常和访问)的样式并分别设置悬停样式。

a
{
    color:#6c7492;
    font-weight:bold;
    text-decoration:none;
}
a:hover
{
    border-bottom:1px solid #6c7492;
}

回答by sblundy

If you've using those pseudo classes, I don't see why not.

如果您使用过这些伪类,我不明白为什么不使用。

a:visited, a:hover {
  ...
}