<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
a:link {
color: skyblue;
}
a:visited {
color: deepskyblue;
}
a:hover {
color: plum;
}
a:active {
color: lightblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target = "_blank">百度</a>
</body>
</html>
锚伪类
链接能够以不同的方式显示
a:hover
必须在 CSS 定义中的a:link
和a:visited
之后,才能生效!a:active
必须在 CSS 定义中的a:hover
之后才能生效!伪类名称对大小写不敏感
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
a:kjys:hover {
color: lightblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target = "_blank">百度</a>
</body>
</html>
锚伪类
链接能够以不同的方式显示
伪类和 CSS 类
伪类可以与 CSS 类结合使用:
当您将鼠标悬停在例子中的链接上时,它会改变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
div:hover {
background-color:skyblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target = "_blank">百度</a>
</body>
</html>
悬停在 <div>上
在 <div> 元素上使用 :hover 伪类的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
p{
display:none;
background-color:skyblue;
padding:30px;
}
div:hover p{
display:plum;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target = "_blank">百度</a>
</body>
</html>
简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素(类似工具提示的效果)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type = "text/css">
p:first-chid{
color:skyblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target = "_blank">百度</a>
</body>
</html>
CSS - :first-child 伪类
first-child 伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。
匹配首个 <p> 元素