Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use the visited pseudo-class selector in CSS related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to use visited pseudo-class selector in CSS, let's take a look at it.

The first letter is LVHA, the order is exactly in line with love-hate, that is, love and hate, the so-called from love to hate, so the order will be remembered.

In this day and age, the pseudo-class: link is not used much, but it still has a use. what we usually use is to set the color of the element directly, for example:

A {color: blue;}

In fact, the following is more appropriate and standardized:

A:link {color: blue;}

What's the difference between the two?

The difference is that the former can match the a:link selector, but the latter can only match the a selector:

Text 2

For example, I like to remove the href attribute to indicate the disabled state of the element button, which is easier to control with a:link disabled and non-disabled CSS.

It's just that 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, and the performance will be a bit messy, so it is rare to see the use of link pseudo-class selector.

However: visited pseudo-class selector is still very useful, especially in list-linked sites, such as article lists, chapter lists, to let users know that I have read this article, which is a friendly experience.

Second, visited pseudo-class selector support CSS is very limited

Perhaps for security reasons, the visited pseudo-class selector supports CSS is limited, currently only supports 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 such as:: before,:: after are not supported. For example, we want to use text to mark links that have been visited, as follows:

A:visited::after {content:'visited';} / / Note, not supported

Sorry, although the idea is good, but there is no browser support, please give up this heart.

Fortunately, the visited pseudo-class supports sub-selectors, but the CSS attributes that can be controlled are exactly the same as: visited, and pseudo elements such as:: before,:: after are not supported for those color-related CSS attributes.

For example:

A:visited span {color: red;} text visited

If the link is visited by a browser, the text color of the element will be straight red, as shown in the screenshot below:

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

Words

CSS is as follows:

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

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

III. No translucency

Use: visited pseudo-class selector to control colors, although the syntax supports translucent colors, but on the performance, either solid color, or completely transparent.

For example:

A {color: blue;} a:visited {color: rgba

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

4. It can only be reset, not out of thin air

In the following CSS, will the elements visited have a background color?

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

The HTML is:

Do you have a background?

The answer is that there will be no background color. The screenshot is as follows:

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

Let's change 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 can be displayed only when visited is used.

The color value set and rendered by visited cannot be obtained.

That is, when the text color value is represented by the color value set by the visited selector, we cannot get this color value by using JS's getComputedStyle ().

The known CSS is as follows:

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

And our link is red, so we run the following JavaScript code:

Window.getComputedStyle (document.links [0]) .color

The result is "rgb (0,0,255)", which is the RGB color value for blue blue.

This is the end of the article on "how to use the visited pseudo-class selector in CSS". Thank you for reading! I believe that everyone has a certain understanding of "how to use visited pseudo-class selector in CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.