a:link,a:visited,a:hover,a:active_html/css_WEB-ITnose

1: Explanation

link: The normal state of the connection

visited: After the connection has been visited

hover : When the mouse is placed on the connection

active: When the connection is pressed


Details:
:hover version: CSS1/CSS2 Compatibility: IE4 NS4
Syntax:
Selector : hover { sRules }
Description:
Set the style sheet properties of the object when its mouse is hovered.
In CSS1 this pseudo-class can only be used for a objects. And for an object without href attribute (property), this pseudo-class has no effect. 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 }
Description:
The setting object is activated by the user (when the mouse clicks and (events that occur between release) of stylesheet properties.
In CSS1 this pseudo-class can only be used for a objects. And for an object without href attribute (property), this pseudo-class has no effect. In CSS2 this pseudo-class can be applied to any object. And the :active state can occur simultaneously with the :link and :visited states.
Currently IE5.5 only supports :active in CSS1.

:link version: CSS1 Compatibility: IE4 NS4
Syntax:
Selector: link { sRules}
Description:
Set the style sheet attributes of an object before it is accessed .
IE3 applies the style sheet attribute of the :link pseudo-class to the visited pseudo-class.
The default value is determined by the browser.
For a objects without href attributes (properties), this pseudo-class does not work.

:visited version: CSS1 Compatibility: IE4 NS4
Syntax:
Selector: visited { sRules }
Description:
Set an object to expire when its link address has been visited Stylesheet properties.
IE3 applies the style sheet attribute of the :link pseudo-class to the visited pseudo-class.
The default value is determined by the browser. Defining the expiration time of the web page or the user clearing the history will affect the function of this pseudo-class.
For a objects without href attributes (properties), this pseudo-class does not work.
2. The importance of the writing order of:hover and a:visited
Today I discovered a strange problem when using the a:hover attribute. The a:hover effect of some links on the same page cannot be displayed normally. The link code is the same, no other styles are used to fix it, which makes me confused. I thought it was because a certain tab was not closed, but the page was quite long, and it was tiring to check, but after much deliberation I couldn't find any other reason, so I simply closed the browser and went to do other things.
When I reopened this page, I suddenly found that the a:hover effect of the link came out again. I thought for a moment, clicked on the link, then turned around and clicked again, and sure enough, it was gone again. I quickly checked the CSS document and found that the a:hover attribute was written before visited. After rewriting it, I tried again and it was ok!
When I was reading a book before, I noticed that when writing about link performance in CSS, there was a reminder that the order of attributes cannot be reversed. I never paid attention to it, and I was usually very casual when writing. Now it seems that this order is still very important.
The normal order of the four attributes of hyperlinks in css is: link, visited, hover, 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;}

Quoted from Lingmo●First Burning Agarwood Blog

a:link, a:hover, a: For the visited elements, the order when defining the CSS is different, which 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 one sentence: 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 downwards in order to ensure that the bottom ones are the most special ones. conditions.
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" (LoVe/HAte), which is the acronym of the four pseudo-categories: LVHA.
Repeat the correct order again: a:link, a:visited, a:hover, a:active.

Last experience addition:

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

2. "Visited link" when the mouse passes "It has two attributes: a:visited and a:hover. The latter attribute will overwrite the previous attribute definition ;

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