In the past with CSS has not encountered this problem, in recent to an undergraduate students to do the project inside. There are some problems, search engine looked up some websites and materials, found that many people asked this question, the results I tried, most of them are not correct. Given the order of my trial, there may be some help for you:
CodeA: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 to see an anonymous friend's question, and to check some information, this person is very thorough: from the first furnace incense MoU a:link, a:hover, a:visited these elements, the definition of CSS
Order, the effect of the link display will be different directly.
I think the reason is the "nearest principle" that the browser follows when interpreting CSS.
For example:
I want the non-access link color to be blue, the active link to be green, the visited link to be red:
- The first case: the order I define is a:visited, A:hover, A:link, and when you put the mouse on a blue link that has not been visited, it does not turn green, and the link will turn green only if it is placed on a red link that has been visited.
- The second case: I adjust the CSS definition order to: A:link, a:visited, a:hover, then, regardless of the link you mouse through has not been visited, it will become green.
This is because,a mouse through the non-access link also has a:link, a:hover two kinds of properties, in the first case, A:link is closest to it, so it takes precedence over a:link, while discarding a:hover's duplicate definition.
In the second case, whether or not the link has been accessed, it first checks to see if it complies with the a:hover standard (i.e. whether there is a mouse passing through it), satisfies, turns green, does not meet, continues to look up, and finds the definition that satisfies the condition.
One word:in CSS, if there are different criteria for the same elements of the definition, it is advisable to put the most general conditions on the top, and then down, to ensure that the bottom of the most special conditions。
In this way, the browser in the display element, only from the special to the general, step-by-step verification criteria, will make your every CSS statement to play an effect.
Of course, if the order is deliberately disrupted, it can also cause some special effects. For example, you can create a difference between the underline color and the text color for the link.
Recently discovered suddenly, the original CSS problem has been raised by an expert. It's still a foreigner. He summed up an easy-to-remember "principles of love and hate”（LOVe/HATE), which is the first letter of four pseudo-classes: LVHA.
Repeat the correct order again: a:link,a:visited,
a:hover, a:active .
Last experience added:
1. The "not visited link" passed by the mouse also has A:link, A:hover two attributes, followed by attributes that override the previous property definition;
2. The "visited link" passed by the mouse also has a:visited, A:hover two attributes, followed by attributes that override the previous property definition ;
So, a:hover definition must be placed in the back of A:link, a:visited,,,,
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
"Experience" defines A:link, a:visited, A:hover, a:active order in CSS
