CSS_03_04_CSS伪元素选择器

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

posted @ 2015-03-29 15:15 第二天半阅读(249) 评论(0) 收藏举报

刷新页面返回顶部