[Experience] defines a: link, a: visited, a: hover, And a: active sequence in CSS.

From: http://www.qianyunlai.com/post-2.html has never encountered this problem with CSS before, in a recent project for an undergraduate students. Some problems occurred. Search Engines checked some websites and materials and found that many people asked this question. I tried the results and most of them were incorrect. The sequence of my tests may be helpful: Code

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;
}

 

Today, I saw an anonymous friend's question and checked some information. This person spoke very well: from the spirit of the eye ● The first furnace of Shen Xiang Blog a: link,: hover, a: visited, which defines 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 ,,,