<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*1: 针对a标签 顺序要注意 不然会被覆盖*/
.el:link{
color:red;
}
.el:visited{
color: orange;
}
.el:hover{
color: yellow;
}
.el:active{
color:green;
}
/* 2: input复选框的自定义样式 */
input[type="checkbox"]{
width:18px;
height:18px;
display: inline-block;
text-align: center;
line-height:18px;
vertical-align: middle;
position: relative;
top:0;
}
input[type="checkbox"]::before{
content: "";
position: absolute;
top: -3px;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9
}
input[type="checkbox"]:checked::before{
content: "\2713";
background-color: #fff;
position: absolute;
left:0;
top:-3px;
border: 1px solid #e50232;
color:#e50232;
font-size: 20px;
font-weight: bold;
}
input[type="checkbox"]:checked + label{
color:red;
}
</style>
</head>
<body>
<div>
<h1>1.动态伪类选择器</h1>
<a href='#' class='el'>点击之前 点击之后 滑过悬停 激活不放 </a>
<h1>2.伪类元素</h1>
<p>
<input type="checkbox" id='checkbox'>
<label for="checkbox">选中状态</label>
</p>
</div>
<script>
</script>
</body>
</html>
