[Experience] Define a:link, a:visited, a:hover, a:active order in CSS_html/css_WEB-ITnose

I have never encountered this problem when using CSS before, in a recent project for an undergraduate classmate. Some problems occurred. I checked some websites and information on the search engine and found that many people asked this question. I tried the results given, but most of them were incorrect.

It may be of some help to everyone:

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

Saw someone today Regarding the question from an anonymous friend, I checked some information again, and this person explained it very thoroughly: Quoted from Lingmo●First Furnace Agarwood Blog

a :link, a:hover, a :visited elements, if the order is different when defining CSS, will directly lead to different link display effects.
I think the reason lies in the "proximity principle" that browsers follow when interpreting CSS.

For example:
I want the color of unvisited links to be blue, active links to be green, and visited links to be red:

First case: the order I defined It is a:visited, a:hover, a:link. At this time, you will find that when you put the mouse on the unvisited blue link, it does not turn green. Only when you put the mouse on the visited red link, the link will turn green.

Second case: I adjusted the CSS definition order to: a:link, a:visited, a:hover. At this time, no matter whether the link you mouse over has been visited, it will become It's green.

This is because an unvisited link that the mouse passes over has both a:link and a:hover attributes. In the first case, a:link is closest to it, so it takes priority. Satisfy a:link and abandon the repeated definition of a:hover.
In the second case, no matter whether the link has been visited or not, it first checks whether it meets the standard of a:hover (that is, whether a mouse passes over it). If it is satisfied, it will turn green. If it is not satisfied, it will continue upward. Search until you find a definition that satisfies the conditions.

In a word: In CSS, if there are definitions for different conditions for the same element, it is better to put the most general conditions at the top and move them downwards in order to ensure that the bottom is the most special condition.
In this way, when the browser displays the element, it will verify the conditions from special to general and upward step by step, so that every CSS statement you make will have an effect.
Of course, if the order is deliberately disrupted, some special effects will also occur. For example, you can create a difference between the underline color and the text color for links.

I suddenly discovered recently that this CSS issue has already been raised by experts. Still a foreigner. He summarized an easy-to-remember "Love-Hate Principle" (Lo Ve/H Ate), which is the acronym of the four pseudo-categories: LVHA.
Repeat the correct sequence again: a:link,a:visited, a:hover,a:active .

Final experience addition:

1. The "unvisited link" that the mouse passes over also has a:link, a:hover two attributes, the latter attribute will overwrite the previous attribute definition;

2. The "visited link" that the mouse passes also has a:visited, a:hover two attributes, the latter attribute will overwrite the previous attribute definition ;

So, the definition of a:hover must be placed after a:link and a:visited,,,

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.