Firefox A: hover problem [experience] defines a: Link, A: visited, A: hover, A: active sequence in CSS

This is very simple, but it is not true in Firefox. The reason is that the pseudo-class definition like a: hover is confusing. In the end, the general concept of IE/Firefox is

A: hover {..}

A {..}

Do not add other pseudo classes. Otherwise, errors may occur.

Another netizen said:

--------------------------------------------------

Http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html

[Experience] defining a: Link, A: visited, A: hover, And A: active sequence in CSS has never encountered this problem before, in a project recently provided to an undergraduate student. 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 to you: 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 ;
}
Copy code

 

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 Sequence Different 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 two attributes: A: link and a: hover. In the first case, a: link is closest to it, so it first satisfies 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.

One sentence:In CSS, if the same element is defined for different conditions, you should put the most general conditions on the top and go down in sequence to ensure that the bottom is the most special condition..
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 and hate principles"(LOVE/HATe), that is, the first letter of the 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 ,,,