<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类和伪元素选择器</title>
<style type="text/css">
.link{
font-size: 30px;
text-decoration: none;
color:pink;
}
.link:hover{
color: yellow;
font-weight: bold;
}
/*伪类,相当于元素的默认属性,一直都有,但是一般不进行改动
通常情况先弥补top塌陷bug和消除浮动bug的时候才会用到before和after
hover是制作鼠标悬停效果
*/
/*伪类常用的就只有hover 类名后用冒号:hover表示*/
.box1, .box2{
font-size:55px;
}
.box1:before{
/*before 伪元素能够在标签前面添加内容, 其内容不可选中, 称之为 伪元素*/
content: ".123";
/*冒号分号一定要成对出现*/
color:green;
}
.box2:after{
content: ".//";
color:green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度</a>
<br /><br /><br /><br />
<div class="box1">这是第一个div元素块</div>
<div class="box2">这是第二个div元素块</div>
</body>
</html>
