CSS Link
Different links can have different styles.
Link style
The link style can use any CSS properties (such as color, font, background, etc.).
Special links can have different styles, depending on their status.
The four link statuses are:
a:link - normal, unvisited link
a:visited - link that the user has visited
a:hover - when the user mouses over the link
a:active - the moment the link is clicked
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html> When set to several link status styles, there are also some sequences Rules:
a:hover must follow a:link and a:visited
a:active must follow a:hover
Common link styles
Based on the example of the color change of the link above, see what state it is in.
Let’s move on to link styles through some other common ways:
Text-decoration
text-decoration Attribute Main Used to remove underscores from links:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">点击链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>
Next Section