Linked pseudo-classes must be written in LVHA order to avoid style conflicts, because the CSS selector parses from right to left and the styles defined later have higher priority. 1. Link (not accessed) should be defined first to ensure that the underlying state is not overwritten; 2. Visited (visited) then define to avoid affecting the unreached link style; 3. Hover is placed in front of Active to prevent the activation state from overwritten by hover; 4. Active is defined last to ensure that the style is triggered correctly when clicked. In actual use, you need to pay attention to: do not miss key states, consider accessibility, test different device behaviors, mobile terminals can combine: focus to enhance the experience, alternative writing methods such as merging selectors or using preprocessors can also effectively manage styles.

You may have encountered this situation when writing CSS: Set different state styles for the link, and as a result, some states are not valid or are overwritten. This is most likely because you are not defining the linked pseudo-class in the correct order. The key point here is: the writing order of the link pseudo-class will affect the priority of the style , and the recommended order is LVHA .

LVHA represents:

• Link (Unvisible link)
• V isited (link visited)
• H over (mouse hover)
• Active (Active status)

This order is not determined casually, but is determined based on how the browser matches the selector. Because the rule in CSS is "from behind", if you put :hover behind :visited , it will work properly; but if it in turn, it may cause the hover effect to be overwritten.

Why is LVHA the recommended order?

The CSS selector is parsed from right to left. That is to say, when the browser determines whether a certain style is applied, it starts checking from the rightmost selector. for example:

 a:hover {}

The browser first checks whether the hover status is in, and then searches for the <a> tag. If multiple pseudo-classes are confused in sequence, some states may never be triggered correctly.

For example: If you put :active in front of :hover , then when you click the link, the :active style may be overwritten by :hover because both may meet the conditions at the same time, but the subsequent rules have higher priority.

So to ensure that each state can be displayed as expected, it should be written in the order of LVHA:

 a:link {}
a: visited {}
a:hover {}
a:active {}

This ensures:

• Unvisible and visited links can display their respective colors correctly
• Hover and activation states can take effect without affecting the base state.

What issues should be paid attention to in actual use?

1. Don't miss the key state
   If you only set :hover and :active , but ignore :link and :visited , the performance of the link in different browsing states may be unexpected.

2. Consider accessibility
   The color of the visited link should have sufficient contrast with the unvisited link for user identification. Don’t just rely on color distinction, you can combine other styles with asscriptions, font thickness, etc.

3. Test different state switching
   Test clicks, hovering, long pressing and other operations in a real browser to ensure that the transition between various states is natural and there will be no confusion or conflicts in styles.

4. Mobile behavior is slightly different
   On touch screen devices, :hover may not take effect immediately like a mouse hover, and even requires a user to click once before "activate". You can enhance the interactive experience by adding :focus .

What other alternative writing methods?

Some people will merge multiple pseudo-classes in one selector, for example:

 a {
  color: blue;
}
a: visited {
  color: purple;
}
a:hover, a:focus {
  color: red;
}
a:active {
  color: orange;
}

This writing method is simpler and easier to maintain. Just pay attention to the order of order to avoid the style being overwritten by mistake.

In addition, some frameworks or preprocessors (such as SCSS) allow you to nest writing methods and can also help keep the structure clear.

Basically that's it. Mastering the LVHA order is not only for the purpose of writing standard, but also for avoiding style conflicts and debugging troubles. Although it doesn't seem complicated, it's easy to ignore in actual projects.

The above is the detailed content of What is the correct order for link pseudo-classes (LVHA)?. For more information, please follow other related articles on the PHP Chinese website!