: Link,: visited,: focus,: hover,: active details, visitedhover

: Link,: visited,: focus,: hover,: active details, visitedhover
CSS is also known as a stacked style table. The so-called stacked style means that the style behind will overwrite the previous style. Therefore, in the style sheet, the order of each style is very exquisite.: LinkAnd: VisitedThe order in the style file can be placed at will. The focus, hover, and active parameters directly affect the Display Effect of the style if you set different sequence.: Focus->: hover->: active Some may be confused. Why do we have to follow this order without disrupting it? In fact, each of their selectors represents a meaning.: LinkIt indicates the style of the access link, so as long as you are a hyperlink and have not been accessed, the link will be displayed according to the style you set, so its location order does not matter.: VisitedIt indicates the style after the link is accessed. Once the link is accessed, the style of the link will be the visited style you set, which focuses on the following:: FocusIt indicates the style when the focus is obtained. Some people say that the style when the focus is obtained. This can be viewed through the tab key. Once the focus is obtained through the link, the style is the focus style you set.: HoverIt indicates the style when your cursor passes through an element. If you put this style after: focus, the focus style is displayed when the link gets the focus, when the cursor passes through this link, the hover style is displayed, because the hover is placed behind and overwrites the focus style. If: hover is placed before and: focus is placed behind, the focus style is displayed when the cursor gets the focus. However, when the cursor passes through the link, the hover style is not displayed, instead, the focus style is replaced by the focus style after the hover.The test code is as follows:

a:focus{color:#AA80FE;text-decoration:underline;} a:hover{color:#FF0000;text-decoration:underline;}

a:hover{color:#FF0000;text-decoration:underline;} a:focus{color:#AA80FE;text-decoration:underline;}

: ActiveIt indicates the style when the element is activated, that is, the style when the element is pressed. If the active selector and: focus,: hover change the position, the display effect will be different, because the style at the back will overwrite the style at the front.

  The test code is as follows:

a:hover{color:#FF0000;text-decoration:underline;} a:active{color:#FFCC00;}

a:active{color:#FFCC00;} a:hover{color:#FF0000;text-decoration:underline;}

 

You may ask, if css is a stacked style table, does it mean that the style written at the end will certainly overwrite the style at the front?
In HTML, a: link; a: visited; a: hover; a: active;

A: link {color: # FF0000}/* status when no access is made */
A: visited {color: #00FF00}/* accessed status */
A: hover {color: # FF00FF}/* The status when the mouse moves over the link */
A: active {color: # 0000FF}/* status when the mouse is pressed */

What are the meanings of link, visited, hover, and active in DW and CSS styles?

Link, normal
Visited: click the mouse and stay in the above status again.
Hover: the status of the mouse
Status when the active mouse is pressed