第01步：编写css代码：wei.css
@charset "utf-8"; /* 伪元素选择器 :状态 效果顺序：L V H A */ a:link.lin_01{/*超链接，未访问状态*/ background-color:#60F; color:#FFF; text-decoration:none;/*去掉下划线*/ font-size:24px; } a:hover.lin_02{/*悬停效果*/ background-color:#F00; color:#00F; font-size:36px; } a:active.lin_03{/*点击，未放开效果*/ background-color:#000; color:#FFF; font-size:9px; } a:visited.lin_04{/*访问后效果*/ background-color:#9F0; color:#930; font-size:9px; text-decoration:line-through; } div:hover.dh_01{/*div效果*/ background-color:#9F0; color:#6FC; } p:first-letter{/*首字样式*/ background-color:#60F; color:#FF0; font-size:36px; } p:first-line{/*段落第一行*/ font-size:24px; } input:focus{/*input输入框效果*/ background-color:#33C; color:#F00; }
第02步：编写html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>伪元素选择器</title> <link href="wei.css" rel="stylesheet" type="text/css" /> </head> <body> <a href="http://www.baidu.com" target="_blank">无样式效果链接</a> <hr /> 效果01： <a href="http://www.baidu.com" class="lin_01" target="_blank">样式效果01</a> <hr /> 效果02： <a href="http://www.baidu.com" class="lin_02" target="_blank">样式效果02</a> <hr /> 效果03： <a href="http://www.baidu.com" class="lin_03" target="_blank">样式效果03</a> <hr /> 效果04： <a href="http://www.baidu.com" class="lin_04" target="_blank">样式效04</a> <hr /> 效果05：<br /> <div class="dh_01">样式05</div> <div class="dh_01">样式05</div> <div class="dh_01">样式05</div> <hr /> 效果06：<br /> <p>小船袜儿</p> <p>小船袜儿</p> <hr /> 效果07：<br /> <input /> <input /> </body> </html>