A: link, a: visited, a: hover, a: active, visitedhover

A: link, a: visited, a: hover, a: active, visitedhover

1: Explanation

Link: normal connection status

Visited: after the connection is accessed

Hover: When the mouse is placed on the connection

Active: when the connection is down


Details:
: Hover version: CSS1/CSS2 compatibility: IE4 + NS4 +
Syntax:
Selector: hover {sRules}
Note:
Sets the style table attribute when an object is hovering over it.
In CSS1, this pseudo class can only be used for object. This pseudo class does not work for a object without the href attribute (feature. In CSS2, this pseudo class can be applied to any object.
Currently, IE5.5 + only supports hover in CSS1.

: Active version: CSS1/CSS2 compatibility: IE4 +
Syntax:
Selector: active {sRules}
Note:
Set the style table attribute when the object is activated by the user (events occur between mouse clicks and release.
In CSS1, this pseudo class can only be used for object. This pseudo class does not work for a object without the href attribute (feature. In CSS2, this pseudo class can be applied to any object. In addition, the active status can occur simultaneously with the link status and the visited status.
Currently, IE5.5 + only supports: active in CSS1.

: Link version: CSS1 compatibility: IE4 + NS4 +
Syntax:
Selector: link {sRules}
Note:
Set the style sheet attribute of object a before being accessed.
IE3 will apply the style table attribute of the link pseudo class to the visited pseudo class.
The default value is determined by the browser.
This pseudo class does not work for a object without the href attribute (feature.

: Visited version: CSS1 compatibility: IE4 + NS4 +
Syntax:
Selector: visited {sRules}
Note:
Set the style sheet attribute of object a when its link address has been accessed.
IE3 will apply the style table attribute of the link pseudo class to the visited pseudo class.
The default value is determined by the browser. Defining the expiration time of a web page or clearing historical records affects the role of this pseudo-class.
This pseudo class does not work for a object without the href attribute (feature.
2: hover and a: Importance of the visited writing Sequence
Today, when I used the: hover attribute, I found a strange problem. Some links in the same page do not show the effect of a: hover. The code for the link is the same, and it is not fixed by using other styles. I thought it was a tag that was not closed, but the page was long and it was too tired to check. But I wanted to find another reason. I simply closed the browser and did other things.
When I re-opened the page, I suddenly found that the: hover EFFECT OF THE link came out again. I thought for a moment, clicked the link, and then looked back and clicked again, and it was gone. I checked the css document and found that the: hover attribute was written before visited. After rewriting, I tried again. OK!
When I was reading a book, I noticed a prompt in css about the link performance that the order of each attribute cannot be reversed, and I never paid attention to it. It is usually casual when I write it. It seems that this order is not very important.
The four attributes of a hyperlink in css are generally in the following normal order: link, visited, hover, and active, that is

A: link
A: visited
A: hover
A: active

A:link { color: #000000; TEXT-DECORATION: none}A:visited { COLOR: #000000; TEXT-DECORATION: none}A:hover { COLOR: #ff7f24; text-decoration: underline;}A:active { COLOR: #ff7f24;   text-decoration: underline;}

Reference from Ling Yi ● The first furnace of Shen Xiang Blog a: link, a: hover, a: visited these elements, when defining CSS SequenceDifferent results may also lead to different link display effects.
I think the reason is that the browser follows the "proximity principle" when interpreting CSS ".

For example:
I want to set the color of the unaccessed link to blue, the activity link to green, and the accessed link to Red:

• First case: the sequence I defined is a: visited, a: hover, And a: link. At this time, you will find that when you place the mouse over a blue link that has not been accessed, it does not turn green. The link turns green only when it is placed on the accessed red link.
• The second case: I adjusted the CSS definition sequence to a: link, a: visited, and a: hover. At this time, no matter whether the link you clicked has been accessed, it turns green.

This is because the unaccessed link with a mouse has both a: link and a: hover attributes. In the first case, a: link is closest to it, therefore, it gives priority to a: link and does not give up the repeated definition of a: hover.
In the second case, whether the link has been accessed or not, it must first check whether it complies with the: hover standard (that is, whether there is a mouse passing through it). If yes, it turns green, if the condition is not met, the search continues until the definition that meets the condition is found.

In a word: in CSS, if the same element is defined for different conditions, you should put the most general conditions at the top and go down in sequence, the following are the most special conditions.
In this way, when the browser displays elements, it will verify the conditions from special to general, step-by-step, so that each of your CSS statements will have an effect.
Of course, if you deliberately disrupt the order, it will also produce some special results. For example, you can create the differences between the underline color and the text color for the link.

Recently, it was suddenly found that this CSS problem had already been raised by some people. A foreigner. He summed up a memory-friendly "LoVe/HAte principle" (LoVe/HAte), that is, the first letter of four pseudo classes: LVHA.
Repeat the correct sequence: a: link, a: visited, A: hover, A: active.

Last experience:

1. The "unaccessed link" with the mouse is owned at the same timeA: link, a: hoverTwo types of attributes. The subsequent attributes will overwrite the previous attribute definitions;

2. The "accessed link" with the mouse is owned at the same timeA: visited, a: hoverTwo types of attributes. The subsequent attributes will overwrite the previous attributes.Definition;

 

Therefore, the definition of a: hover must be placed behind a: link and a: visited ,,,