CSS, also known as Cascading Style Sheets, the so-called cascading means that the later styles will cover the previous styles, so in the style sheet, the order of the styles is very particular.
:link and :visited can be placed in any order in the style file
And focus, hover, active, if you set the order in a different order, it will directly affect the display effect of the style. The sequence is explained in detail below: focus -> :hover -> :active
①:link represents 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 position order does not matter;
②:visited represents the style after the link is accessed. Once the link is accessed, its style will be the visited style you set.
The focus is on the following:
(1) Let’s talk about the focus and hover order first:
③:focus represents the style when the focus is obtained. Some people say what is the style when the focus is obtained. We can view this through the tab key. Once the link obtains the focus, its style is the focus style you set.
④:hover represents the style when your cursor passes an element. If you put this style after :focus, when the link gets the focus, the style of :focus will be displayed, and when the cursor passes the link, the style of hover will be displayed , because the hover is in the back, it will override the focus style.
If :hover comes first and :focus comes after, the style of :focus will be displayed when the cursor gets the focus, but when the cursor passes the link, the style of :hover will not be displayed, but the style of :focus will continue. Because the applied focus style is after the hover, overwriting the previous style.
(2) Next, let's talk about the order of hover and visited
When I used the a:hover attribute before, I found a strange problem. The a:hover effect of some links in the same page could not be displayed normally. The linked code is the same, no other styles are used to fix it, I am inexplicable. I thought it was because a certain tab was not closed, but the page was relatively long, and it was tiring to check, but after thinking about it, I couldn't find any other reason, so I simply closed the browser and went to do other things.
When I reopened this page, I suddenly found that the a:hover effect of the link came out again. I thought about it, clicked on the link, then turned around and clicked again, and it was gone. I quickly checked the CSS document and found that the a:hover attribute was written before visited, and after it was rewritten, try again, ok!
When I was reading a book before, I noticed that there is a hint in the writing of link performance in CSS that the order of attributes cannot be reversed. Now it doesn't seem that the order is still very important.
The five attributes of hyperlinks in CSS are generally in the normal order: link, visited, focus, hover, active