伪类选择器
伪类选择器主要是对链接的状态和input 输入框有光标时的定义
链接伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
div {
text-align: center;
}
a {
display: block;
width: 150px;
height: 50px;
font: 20px 楷体;
line-height: 50px;
color: black;
text-decoration: none;
}
/* 必须按照l-v-h-a的循序定义 */
/* 链接未点击是蓝色 */
a:link {
background-color: rgb(73, 39, 195);
}
/* 已经点开过是红色 */
a:visited {
background-color: rgb(177, 49, 49);
}
/* 鼠标经过是绿色,有下划线*/
a:hover {
background-color: rgb(38, 218, 95);
text-decoration: underline;
}
/* 鼠标点击未弹起是黄色 */
a:active {
background-color: rgb(201, 176, 73);
}
</style>
</head>
<body>
<div><a href="#">我是链接</a></div>
</body>
</html>
focus伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
input:focus {
background-color: aqua;
}
</style>
</head>
<body>
<div><input type="text"></div>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
