Analysis of Four pseudo classes of tag.

Analysis of Four pseudo classes of tag.

We are most familiar with the following four pseudo classes of tag:
: When link has link Attributes
: The visited link address has been accessed.
: Active is activated by the user (events that occur between mouse clicks and release)
: Hover

The order of these four pseudo classes can be found in many places, but why is it so arranged? It has never been mentioned before. Here, I will briefly explain why we are in this arrangement from the perspectives of technology, user experience, and priority.

First, in terms of technology,

The four pseudo classes of a indicate the four states of a respectively. Note that a can only have one State (link ), or two or three statuses at the same time! For example, any a tag with the HREF attribute already meets the link condition when no operation is performed; if you have accessed the tag, it will also be in the link: visited status. When you move the mouse over the accessed a tag, the tag has three statuses: link: visited: hover.

Secondly, from the perspective of user experience,

When a user uses a hyperlink, the following measures should be made for the best user experience:

First, no matter whether the hyperlink has been accessed or not, as long as I move the mouse up (: hover), there must be write changes, such as color changing and underlined, the user is notified that a clickable hyperlink is selected.

Second, whether or not the access is performed, the style changes should be the same when the tag is activated (: active. That is to say, the same a tag must have the same style when the user is activated and the user is activated when the user is not accessed. This is also easy to understand. The effect of a user clicking the same hyperlink should not be different.

Third, the accessed a tag may be differentiated from the unaccessed a tag.

From the perspective of CSS priority,

The previous article mentioned the specific css priority. Here I want to talk about the selection of browsers for conflicting styles with the same priority. For example:
. Test {color: red; color: green ;}
Or:
. Test {color: red ;}
. Test {color: green ;}
In the above two examples, we all know that for the content pointed to by this. test, the browser will display the next Property setting. That is, color: green.

At this point, many people may already have a clue. Based on the above three points, it is not difficult to analyze why we need to arrange this sort.

First, there should be a style change (: hover) When hovering over the mouse in any case. We will put the hover at the end to prevent the hover from being overwritten by settings in other States when it is in another State.
Second, when a is activated (: active), we require that there be the same style no matter whether or not it has been accessed, that is, the effect of this status should be able to overwrite the unaccessed (: link) and accessed (: visited) status. It should be placed behind link: hover.
Third, the accessed a (: visited) may have different style attributes to determine whether a has been accessed. That is to say, the visited State attribute can overwrite the link state attribute, that is, the visited State attribute should be placed after the link.
This afternoon, my TA contacted me and asked, "Is the four pseudo classes of a l v h? Instead of l v a h. Sina is like this. I read love and hate from the book. "

Let's take A look at the relationship between H and. Hover and active indicate that the mouse is suspended on the label and the mouse is not flushed. It is not difficult to find that these two States will not coexist, nor will there be a problem of who needs to cover. Therefore, both LVHA and LVAH have the same effect.

However, using love and hate to remember this sorting is a good method AND is recommended for new users.