使用 CSS 设置链接的不同状态

cssweb developmentfront end technology更新于 2025/1/7 0:44:17

使用 CSS 伪选择器(即 :active、:hover、:link 和 :visited)，我们可以设置链接的不同状态。为了确保功能正常，这些选择器的顺序如下::link、:visited、:hover、:active。

语法

CSS text-indent 属性的语法如下 −

a:(pseudo-selector) {
   /*declarations*/
}

示例

以下示例说明了链接不同状态的样式 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: 20px;
   display: flex;
   float: left;
}
a:link {
   color: navy;
   text-decoration: none;
}
a:visited {
   color: yellowgreen;
}
a:hover {
   color: orange;
   text-decoration: wavy underline;
}
a:active {
   color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html>

输出

这将给出以下输出 −

鼠标悬停在第一个链接上时，我们得到以下输出 −

点击第二个链接时，我们得到以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
a {
   margin: 20px;
   padding: 10px;
   border: 2px solid black;
   text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
   font-size: 1.1em;
}
a:link {
   text-decoration: none;
}
a:visited {
   color: blueviolet;
}
a:hover {
   color: orange;
   font-size: 150%;
   font-weight: bold;
   box-shadow: 0 0 5px 1px grey;
}
a:active {
   color: red;
   box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html>