Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on abstraction outside of the document, so it is called a pseudo class.
CSS pseudo-class is a special class that works on CSS selectors to produce specific effects on selected tags or elements.
The syntax of CSS pseudo-class is: selector: pseudo-class name {attribute: attribute value}
The most commonly used pseudo-class is the pseudo-class of hyperlink a. Links are an important part of a website. You can see many links on almost every web page. Reasonable design of link styles can add to the appearance of the web page. point. Links have four different states, namely link, visited, active and hover. You can set different styles for the four states of the link through the following pseudo-class selectors:
:link: Define the style of unvisited links;
:visited: Defines the style of visited links;
:hover: Define the style when the mouse passes or hovers over the link;
:active: Define the style when the link is clicked.
Example:
<html><head></head><body><a>There is no href a tag, the font is not modified, and there is no response when the mouse is placed on it</a></br><ahref=#target=_blank>href is The a tag of # is blue by default and underlined. When you put the mouse on it, it turns into a hand</a></br><ahref=https://www.dotcpp.com/target=_blank>href is the a tag of the URL. The effect is the same as above</a></body></html>
Running results:
(1):link
Description: Set the style sheet properties of the a object before it is accessed.
Example:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}</style></head><body><ahref=''>First link</a><ahref=''>Second link</a></body>< /html>Running results:
(2):visited
Description: Set the style sheet attribute of an object that is out of date when its link address has been accessed.
Example:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>First link</a>< ahref=''>Second link</a></body></html>Running results:
(3):hover
Description: Sets the style sheet properties of an object when it is mouse-over.
Example:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head> <body><ahref=''>First link</a><ahref=''>Second link</a></body></html>Running results:
(4):active
Description: Set the style sheet properties of the object when it is activated by the user (an event that occurs between mouse click and release).
Example:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000 ;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>First link</a><ahref=''>Second link</a>< /body></html>Running results:
Different order when defining CSS will directly lead to different link display effects. The reason may be the "proximity principle" that browsers follow when interpreting CSS. Correct order: a:link, a:visited, a:hover, a:active.