In CSS, the order of pseudo-class selectors: link, :visited, :hover and :active are very important. They must be written in LVHA (Link → Visited → Hover → Active), because when the styles are of the same priority, the subsequent rules will override the previous one; 1. :link sets the unreached link style; 2. :visited sets the accessed link style, but is restricted by browser privacy; 3. :hover sets the mouse hover effect, and the mobile side may need additional processing; 4. :active sets the style when clicking to provide instant feedback; this order ensures that all statuses can be displayed correctly to avoid browser inconsistencies.

In CSS, :link , :visited , :hover and :active are pseudo-class selectors commonly used for link styles. The order they are written is critical because if the order is incorrect, some styles may not appear as expected.

The correct order is:

:link → :visited → :hover → :active

This is called the LVHA order (Link → Visited → Hover → Active).

Why is the order important?

The style in CSS is "latest", that is, if the two selectors have the same priority, the latter will override the previous one.

For example:

 a:hover { color: blue; }
a: visited { color: purple; }

If you write :hover in front of :visited , it may turn blue when the mouse is hovered over a visited link; but if written in reverse, inconsistent behavior may occur, especially in different browsers.

Therefore, in order for all states to be displayed normally, it must be written in the order of LVHA.

Recommendations on the role and usage of each pseudo-class

:link ——Unvised link

• Only effective for links that have not been clicked by users.
• It is usually used to set the default link color, such as blue.

Example:

 a:link {
  color: #0000EE;
}

:visited —— Links visited

• Works on links that the user has visited.
• For privacy protection, modern browsers limit the types of styles that can be applied (such as not modifying certain sizes or background images).

suggestion:

• Only change the basic styles such as colors and fonts.
• Don't try to track user behavior through :visited .

Example:

 a: visited {
  color: #551A8B; /* Default accessed link color*/
}

:hover —— The status when the mouse is hovered

• Triggered when the user's mouse pointer moves to the link.
• It is often used to enhance interactive feedback, such as enlarging text and changing background color.

hint:

• On mobile devices :hover may behave inconsistently, and some require a click to "activate".
• If you want the mobile terminal to have similar effects, you may need to cooperate with JavaScript or other technologies.

Example:

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

:active — When the link is activated (clicked)

• Effective when the user clicks on a link but has not released the mouse button.
• It is usually used to provide click feedback, such as darkening colors or button pressing effects.

Skill:

• This state is very short-lived, so the style changes should be obvious but not excessive.
• You can combine transition animation to improve the experience.

Example:

 a:active {
  color: #008000;
}

Common practices in actual development

• Many developers only care about :hover and :active , and ignore :link and :visited , especially internal links or no distinction between access.
• When using a CSS preprocessor (such as Sass), these pseudo-classes can be nested under the main selector for clearer.
• If you are using CSS frameworks (such as Tailwind, Bootstrap), they usually have already processed the pseudo-class order of the link.

For example, in Sass:

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

Basically that's it. Just remember the order of LVHA, most link style conflicts can be avoided.

The above is the detailed content of What is the correct order for link pseudo-classes like :link, :visited, :hover, and :active in CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!