CSS basic tutorial pseudo-class selector
CSS pseudo-class selector: Add styles to hyperlinks (add styles to different states of the link)
A hyperlink has four Status:
Normal status (:link): The mouse is not placed on the previous link style.
Hover state (:hover): The style when the mouse is placed on the link.
Activate state (:active): Hold down the left mouse button without releasing it. This state is particularly short-lived.
Visited state (:visited): Press the left mouse button and pop it up, the style effect at this time.
In daily work, the following writing methods are used to add different styles to links:
a:link, a:visited{ color:#444; text-decoration: none; } //Combine "normal state" and "visited state" into one.
a:hover{ color:#990000; text-decoration:underline; } //"Mouse over" to create a single effect
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
</head>
<style type="text/css">
.box {
height:30px;
border:1px solid red;
padding:10px;
}
.box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
.box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
</style>
<body>
<div class="box">
<a href="#">欢迎来到php.cn</a>|
<a href="#">首页</a>|
<a href="#">课程</a>|
<a href="#">问答</a>|
<a href="#">手记</a>
</div>
</body>
</html>
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
