<!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>