73 lines
1.5 KiB
HTML
73 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>08_伪类选择器_动态伪类</title>
|
|
<style>
|
|
/* 选中没有访问过的a元素 */
|
|
a:link {
|
|
color: red;
|
|
}
|
|
|
|
/* 选中访问过的a元素 */
|
|
a:visited {
|
|
color: pink;
|
|
}
|
|
|
|
/* 选中鼠标悬浮的a元素 */
|
|
a:hover {
|
|
color: skyblue;
|
|
}
|
|
|
|
/* 选中激活状态的a元素 */
|
|
a:active {
|
|
color: green;
|
|
}
|
|
|
|
/* 选中鼠标悬浮的span元素 */
|
|
span:hover {
|
|
color: green;
|
|
}
|
|
|
|
/* 选中的是激活的span元素 */
|
|
span:active {
|
|
color: red;
|
|
}
|
|
|
|
/* 选中的是获取焦点的input元素 */
|
|
input:focus {
|
|
color: orange;
|
|
background-color: pink;
|
|
}
|
|
|
|
select:focus {
|
|
color: orange;
|
|
background-color: black;
|
|
}
|
|
|
|
select option:checked {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<a href="https://hexo.zyjblogs.cn">去zyjblogs博客</a>
|
|
<a href="https://gogs.zyjblogs.cn">去代码仓库</a>
|
|
<span>zyjblogs</span>
|
|
<br>
|
|
<input type="text">
|
|
<br>
|
|
<input type="text">
|
|
<br>
|
|
<input type="text">
|
|
|
|
<select>
|
|
<option value="beijing">北京</option>
|
|
<option value="shanghai">上海</option>
|
|
</select>
|
|
</body>
|
|
|
|
</html> |