CSS: visited pseudo-class selector secret memories

Yesterday I wanted to use a:visited to change the color of the visited text on the right side of "Guess You Like" but found that the effect was average after changing it again and again. I remembered that there were several other CSS settings related to color. As a result, I haven't used this pseudo-class selector for too long, so I couldn't remember the specific supported CSS. I found it necessary to organize and record them myself.

1. From love to hate

If the link 4 pseudo-classes (the last two pseudo-classes were later dragged to almost all HTML tag elements) are used at the same time, the order is as follows: :link → :visited → :hover → :active .

The first letters together form LVHA, and the order is exactly the same as love-hate, which means love and hate, the so-called love turns to hate, so this order is easy to remember.

Nowadays, the :link pseudo-class is not used much anymore, but it still has its uses. We usually use it more often to directly set the color of the <a> element, for example:

a { color: blue; }

In fact, the following is more appropriate and more standardized:

a:link { color: blue; }

What is the difference between the two?

The difference is that of the following two <a> elements, the former can match the a:link selector, but the latter can only match the a selector:

<a href="##">Text</a>
<a>Text 2</a>

For example, I like to remove the href attribute to indicate the disabled state of <a> elements and use a:link disabled and non-disabled CSS for better control.

However, when we use the a:link selector, the a:visited selector must also be set (because a:link is at the front), otherwise the color of the visited link will follow the color set by the system or the current element, which will result in a bit of confusion. Therefore, it is rare to see the use of the :link pseudo-class selector nowadays.

The :visited pseudo-class selector is still very useful, especially in list-style link sites, such as article lists and chapter lists. It can let users know that I have read this article, which is a relatively friendly experience.

2. The :visited pseudo-class selector has limited support for CSS

Perhaps for security reasons, the :visited pseudo-class selector has limited support for CSS, currently only supporting the following CSS: color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , column-rule-color and outline-color .

At the same time, pseudo-elements like ::before and ::after are not supported. For example, we want to use text to mark visited links, as follows:

a:visited::after{content:'visited';} // 注意，不支持

Sorry, it's a good idea, but no browser supports it, so please give up on it.

Fortunately, the :visited pseudo-class supports child selectors. However, the CSS properties that can be controlled are exactly the same as :visited, which are just a few color-related CSS properties. It also does not support pseudo-elements such as ::before and ::after.

For example:

a:visited span{color: red;}
<a href="">Text<span>visited</span></a>

If the link has been visited by the browser, the text color of the <span> element will be red, as shown in the following screenshot:

Therefore, we can use the following method to implement the visited link text followed by the word visited. The HTML is as follows:

<a href="">Text<small></small></a>

The CSS is as follows:

small { position: absolute; color: white; } // Setting color: transparent here is invalid small::after { content: 'visited'; }
a:visited small { color: purple; } 

In addition to its limited CSS support, the :visited pseudo-class selector has a number of other strange properties.

3. No translucency

When using the :visited pseudo-class selector to control color, although the syntax supports semi-transparent colors, the performance is either solid color or fully transparent.

For example:

a { color: blue; }
a:visited { color: rgba(255,0,0,.5); }

The result is not a translucent red, but a pure red, completely opaque.

4. You can only reset, not set it out of thin air

In the following CSS, will the visited <a> element have a background color?

a { color: blue; }
a:visited { color: red; background-color: gray; }

The HTML is:

Is there a background color? </a>

The answer is that there will be no background color, as shown in the following screenshot:

Because the color value in the :visited pseudo-class selector can only be reset and cannot be set out of thin air.

We can modify it to the following:

a { color: blue; background-color: white; }
a:visited { color: red; background-color: gray; }

At this point, the text effect is as follows:

That is, there needs to be a background color by default, so that the background color will be displayed when visited.

5. The color value set and presented by :visited cannot be obtained

That is to say, when the text color value is expressed as the color value set by the :visited selector, we cannot obtain this color value using JS's getComputedStyle().

The known CSS is as follows:

a { color: blue; }
a:visited { color: red; }

And our link appears red, at this time we run the following JavaScript code:

window.getComputedStyle(document.links[0]).color;

The output result is: "rgb(0, 0, 255)", which is the RGB color value corresponding to blue.

The following screenshot shows:

6. Memories Completed

In short, the :visited pseudo-class selector is a selector with many "quirks". If you try to understand it in the same way as selectors such as :hover or :active, you will definitely be confused because too many features are not supported and too many behaviors are not in line with conventional understanding.

The reason for this, I guess 100% is for security reasons. If the browser can know which links you have visited through JS or other behaviors, my privacy will be exposed directly, which is definitely not acceptable. So, if you want to use the :visited pseudo-class selector to do something fancy, I advise you to give up this idea and just work hard.

In addition, there should be some other weird features of :visited, and everyone is welcome to add to them.

Summarize

The above is the secret memoir of the CSS :visited pseudo-class selector introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!