One of the CSS Test center,<a> tags, Pseudo-class

One <a>Overview of common pseudo-classes for tags

    A:link{color:blue}                                                         a:visited{color:red}    A:hover{color:green}    A:active{color:purple}

• linkThis pseudo-class is active when there is a link and the link is not accessed obsolete.

• vistiedA link has been accessed out of date and this pseudo class is active.

• hoverWhen the mouse hovers over a link, the pseudo-class is activated until the mouse moves the link.

• activeThis pseudo-class activates when you click the link with the mouse. Note that when the mouse is clicked, the pseudo-class is activated until the mouse is released.

• Second, the <a> label pseudo-class writing sequence detailed

• Why should we consider the writing order of pseudo-classes?

First, the full name of CSS (cascading style Sheets) is translated into cascading style sheets . Sometimes multiple rules define the same property of an element, what should I do? CSS uses cascading principles to consider style declarations to determine which rules in conflicting rules should work. First, the style you write will be the style you write if it conflicts with the browser's default style. On this basis, CSS uses cascading principles to consider particularity (specificity), order, and importance (importance)to determine which rule in conflicting rules should work. Don't be affected by these terms, you just have to try to understand how CSS determines which styles to apply and when to apply those styles. 1
Second, because the <a> label of the four pseudo-class is the same, so when a link is in the state of activating multiple pseudo-classes at the same time, then the writing order of Pseudo-class plays a key role, thus affecting the final display effect. That's why we have to consider the order in which pseudo-classes are written.

Which pseudo-classes are activated at the same time and affect the display effect?

The first, in fact, :link and :visited two pseudo-class between the sequence does not matter. Since they cannot be triggered at the same time, they are accessed at the same time without access. Note here that someone will :link understand that if a link exists for an element, it will be activated, which is wrong. When a link is accessed, :link it is no longer active. Let's do an experiment.

a:visited{color:red}                                                 A:hover{color:green}a:active{color:purple}a:link{color:blue}

We put it :link in the end, the start of the link is not accessed, whether it is my mouse hover or click, the color will not change, are blue. When I first clicked the mouse and loosened, the color changed to red. Then the suspension will become green, then click, it will become purple, and then released on the return to red. The blue will not appear again. The link still exists, but it has been accessed, so the :link pseudo-class is no longer active.
Second, from the user's point of view, regardless of link access or not visited, want to when the mouse hover over the link can produce color changes, and, regardless of link access or not visited, the resulting color changes should be the same. So we should put it :hover on :link and :visited back.

A:link{color:blue}                                                 A:visited{color:red}a:hover{color:green}

Thirdly, from the user's point of view, regardless of link access or not visited, all hope that when the mouse click on the link can produce color changes, and, regardless of link access or not visited, the resulting color changes should be the same. So we should put it :active on :link and :visited back.

A:link{color:blue}                                                A:visited{color:red}a:active{color:purple}

Four, in order, always first hover the mouse over the link, and then to be able to click, the expected effect is the color changes when hovering, click on the mouse to produce another color change. If you put hover behind active, when you click on the link, you actually activate the active state while triggering the hover pseudo-class, hover the color of the active in the back, so you can't see the active color. So hover before active. 2

A:link{color:blue}                                                   A:visited{color:red}a:hover{color:green}a:active{color:purple}

Remember the order of the formula: "Love,ha"