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

问题

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 state as a:link and a:hover. Is this possible? supported in most common browsers?

回答1:

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)

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

a:hover {color: white !important;}

回答2:

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.

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.

a:visited:hover { }

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

回答3:

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

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

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.

回答4:

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

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

回答5:

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

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

来源：https://stackoverflow.com/questions/303440/setting-avisited-link-to-same-state-as-alink-and-ahover

标签

css

hyperlink