CSS 伪类 (Pseudo-classes)实例
CSS 伪类用于向某些选择器添加特殊的效果
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
###########
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
#####################
1.超链接
本例演示如何向文档中的超链接添加不同的颜色。
<style type="text/css">
a:link {color:#0000FF}
a:visited{color:#00FF00}
a:hover{color:#FF00FF}
a:active{color:#0000FF}
</style>
</head>
<body>
<p><b><a href="test1.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在定义中，a:hover必须位于a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在Css定义中， a:active 必须位于a:hover 之后，这样才能生效！</p>
2.超链接 2
本例演示如何向超链接添加其他样式。
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited{color:#0000ff;}
a.one:hover{color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited{color:#0000ff;}
a.two:hover{font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited{color:#0000ff;}
a.three:hover{background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited{color:#0000ff;}
a.four:hover{font-family:monospace}
a.five:link {color:#ff0000;text-decoration: none;}
a.five:visited{color:#0000ff;text-decoration: none;}
a.five:hover{color:#ffcc00;underline;}
</style>
</head>
<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>
<p><b><a class="one" href="test1.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="test1.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="test1.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="test1.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="test1.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>
3.超链接：:focus 的使用
本例演示如何使用 :focus 伪类（无法在 IE 中工作）。
<style type="text/css">
input:focus{
}
</style>
</head>
<body>
<form action="test1.html" method="get">
First name:<input type="text" name="fname" /><br/>
Last name:<input type="text" name="lname" /><br/>
<input type="submit" value="Submit" />
</form>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p>
</body>
4.:first-child（首个子对象）
本例演示 :first-child 伪类的用法。
<style type="text/css">
p:first-child{font-weight:bold;}
li:first-child{text-transform: uppercase;}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert key</li>
<li>Turn key<strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> Push the</p>
</div>