伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1::after{/*在后面添加内容*/
content: "，疑似地上霜。";
color: red;
}
.box2::after{
content: url(img/qf_32.jpg);
}
.box3::before{/*在前面添加内容*/
content: url(img/qf_32.jpg);
margin-right: 10px;
}
.box4::first-letter{/*设置第一个字的样式*/
color: red;
font-size: 30px;
}
.box5::first-line{/*设置第一行文本的样式*/
color: magenta;
}
.box6::selection{/*设置选中之后的样式*/
color: green;
background: red;
}
</style>
</head>
<body>
<!-- div{$}*10 按Tab键 -->
<div class="box1">床前明月光</div>
<div class="box2">添加小图</div>
<div class="box3">在我前面添加图片</div>
<div class="box4">我很帅，我很有钱，但是没对钱没兴趣</div>
<div class="box5">我很帅，我很有钱，但是没对钱没兴趣我很帅，我很有钱，但是没对钱没兴趣我很帅，我很有钱，但是没对钱没兴趣</div>
<div class="box6">设置选中之后的字体颜色绿色，背景颜色为红色</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
