Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the function of CSS hyperlink pseudo class". In daily operation, I believe that many people have doubts about the role of CSSS hyperlink pseudo class. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what is the role of CSSS hyperlink pseudo class?" Next, please follow the editor to study!

The functions of four CSSS hyperlink pseudo classes: 1, ": link", define the style of the normal link; 2, ": visited", define the style of the visited link; 3, ": hover", define the style when the mouse hovers over the link; 4, "active", define the style when the mouse clicks on the link.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Because we want to define the link style, the essential thing is the anchor tag in the hyperlink-- a, the method of writing anchor tag and pseudo-class link is the basic method of defining the link style, which is written as follows:

A:link, which defines the style of normal links

A:visited, which defines the style that has been accessed

A:hover, which defines the style when the mouse hovers over the link

A:active, which defines the style when the mouse clicks on the link.

Among them:: link and: visited can only be used to set the hyperlinks a _.

Hover is used to indicate the state of mouse movement

Active is used to indicate mouse clicks

Links that have not been visited by the pseudo-class of hyperlinks

Visited link / * unvisited link status * / a:link {font-size: 20px; color: hotpink;} / * visited link status * / a:visited {color: green;} / * status when the mouse moves into the link * / a:hover {color: rgb (0,217,255);} / * status when the mouse clicks on the link * / a:active {color: rgb (255,0,0) }

Note: as long as you have searched, it is counted as visited, unless the historical browsing cache data is cleared.

Pseudo element

Pseudo elements, some special elements in the page that do not really exist, pseudo elements represent some special positions. Pseudo elements start with::

:: first-letter stands for the first letter

:: first-line represents the first line

:: selection indicates the selected content

:: the beginning of the before element

:: the end of the after element

Note:

1. Because setting:: before and:: after has no effect,:: before and:: after must be used in conjunction with the content attribute. 2. The content added in content cannot be selected by mouse.

3. The Q tag in html represents a short reference, which has the effect of increasing double quotation marks. The principle is that:: before and:: after attributes are used, and double quotation marks are added in content, so the double quotation marks of the Q tag cannot be selected.

Pseudo elements WHERE THERE IS A WILL, THERE IS A WAY

The secret of success (The key to success) is not so much money as a strong will. A great man is one who has a strong will and an indomitable spirit. In other words, if a man does not have a strong will to win (get) the final victory, he will never succeed in his life. He is no more than a failure.It is quite obvious that there is no difficult thing (nothing difficult) in the world. If you make up your mind to do it, you will certainly accomplish your end. That stands to reason.

/ * the first letter sets the pixel to 50px * /:: first-letter {font-size: 50px;} / * the first line sets green * /:: first-line {color: green;} / * the font background selected by the mouse is set to orange * /:: selection {background-color: sandybrown } / * the symbol ☛ is added before the content of element p begins, and the symbol ☚ is added at the end. Note that the symbol mouse cannot be selected * / p::before {content: "☛";} p::after {content: "☚";}

At this point, the study on "what is the role of CSS hyperlink pseudo-class" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.