1.Overview of commonly used pseudo-classes for tags
a:link{color:blue} a:visited{color:red} a:hover{color:green} a:active{color:purple}
linkWhen there is a link and the link has not been When accessed, this pseudo-class is active.
vistiedThis pseudo-class is active when a link has been visited.
hoverThis pseudo-class is active when the mouse is hovering over a link until the mouse moves away from the link.
#activeThis pseudo-class is activated when a link is clicked with the mouse. Note that the mouse is not released after clicking. This pseudo-class is active until the mouse is released.
2.Detailed explanation of the writing order of pseudo-classes
Why should we consider the writing order of pseudo-classes ?
First, the full name of CSS (Cascading Style Sheets) is translated asCascading Style Sheets. Sometimes multiple rules define the same attribute of an element. What should we do in this case? CSS uses a cascading principle to consider style declarations to determine which of conflicting rules should take effect. First of all, if the style you write conflicts with the browser's default style, the style you write will prevail. On this basis, CSS uses the principle of cascading to considerspecificity, order, and importanceto determine which rule among conflicting rules should take effect. Don’t get carried away by the terminology, just try it and you’ll understand how CSS determines which styles to apply and when.1
Second, since the particularity of the four pseudo-classes of thetag is the same, when a link is in the state of multiple activations at the same time When using pseudo-classes, the writing order ofpseudo-classesplays a key role, thus affecting the final display effect. This is why we need to consider the order in which pseudo-classes are written.
Which pseudo-classes will be activated at the same time and affect the display effect?
First, in fact, the order between the two pseudo-classes:linkand:visited does not matter. Because they cannot be triggered at the same time, that is, they have been visited at the same time when they have not been visited. Note here that some people understand:linkto mean that as long as a link exists for an element, it will be activated. This is wrong. Once the link has been visited,:linkis 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:linkat the end. At the beginning, the link was not visited. No matter whether I hover or click the mouse, the color will not change, it is always blue. When I click the mouse for the first time and release it, the color changes to red. Then hover it again and it will turn green, click it again and it will turn purple, and release it again and it will return to red. Blue will not appear again. At this time, the link still exists, but has been visited, so the:linkpseudo-class is no longer activated.
Secondly, from the perspective of user habits, whether the link is visited or not, we hope that the color will change when the mouse hovers over the link, and whether the link is visited or not, the color change should be the same. Therefore,:hovershould be placed after:linkand:visited
a:link{color:blue} a:visited{color:red} a:hover{color:green}
Thirdly, from the perspective of user habits, regardless of link access Whether the link has been visited or not, we hope that the color will change when the mouse clicks on the link, and whether the link has been visited or not, the color change should be the same. Therefore,:activeshould be placed after:linkand:visited
a:link{color:blue} a:visited{color:red} a:active{color:purple}
Fourth, in order, always hover the mouse first On the link, you can then click on it. The expected effect is a color change when hovering, and another color change when you click the mouse. If you put hover after active, when you click on the link, you actually trigger the hover pseudo-class while activating the active state. The hover covers the color of active behind it, so you cannot see the color of active. Therefore hover comes before active.2
a:link{color:blue} a:visited{color:red} a:hover{color:green} a:active{color:purple}
The formula to remember the order: "LoVe, HA"
One of the more CSS test points, tag, pseudo-class related articles, please pay attention PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
