伪元素、伪类基础理解

伪元素、伪类基础理解前几天同事问我CSS中单冒号和双冒号是什么意思，我也模糊得很，只有个笼统的概念就是：伪元素和伪类。一直以为，页面布局中很少使用到伪类，结果细细研究发现我们经常使用的hover就是一个最简单的伪类，顿时觉得自己太OUT了，紧跟着这两天都在看这些东西，其实伪类最简单的理解就是用于向某些选择器添加特殊的效果。

具体伪类、伪元素有哪些我就不一一列举，在w3c中列举的很清楚。我主要写写应用的实例。

1.来个简单的，咱们最常用到的向超链接添加不同的颜色：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">a:link { color: #FF0000}a:visited { color: #000}a:hover { color: #FF00FF}a:active { color: #0000FF}</style></head><body> <a href="#" target="_blank">点击试试</a></body></html>

2.稍稍来个复杂点的：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">a.color:link { color: #ff0000;}a.color:visited { color: #0000ff;}a.color:hover { color: #ffcc00;}a.size:link { color: #ff0000;}a.size:visited { color: #0000ff;}a.size:hover { font-size: 150%;}a.bgcolor:link { color: #ff0000;}a.bgcolor:visited { color: #0000ff;}a.bgcolor:hover { background: #66ff66;}a.fontfly:link { color: #ff0000;}a.fontfly:visited { color: #0000ff;}a.fontfly:hover { font-family: monospace;}a.decoration:link { color: #ff0000; text-decoration: none;}a.decoration:visited { color: #0000ff; text-decoration: none;}a.decoration:hover { text-decoration: underline;}</style></head><body> <p>将鼠标移到链接，看到他们改变布局。</p> <p><a class="color" href="javascript:void(0);" target="_blank">改变颜色</a></p> <p><a class="size" href="Javascript:void(0);" target="_blank">改变字体大小</a></p> <p><a class="bgcolor" href="javascript:void(0);" target="_blank">改变背景颜色</a></p> <p><a class="fontfly" href="javascript:void(0);" target="_blank">改变字体</a></p> <p><a class="decoration" href="javascript:void(0);" target="_blank">给文字加上下划线</a></p></body></html>

3.下面来个稍微复杂点的：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标移动移动吧</title><style type="text/css">.btn { display: block; text-align: center; width: 73px; height: 29px; line-height: 30px; text-align: center; text-decoration: none; border: 1px solid #5a8b56; background: #72a76e; color: #f2fff1; font-size: 14px; position: relative;}.btn:before { display: block; width: 72px; height: 28px; content: ''; position: absolute; border-top: 1px solid #93bb90; border-left: 1px solid #93bb90;}a:hover.btn { background: #62905e; border-color: #5a8b56;}a:hover.btn:before { border-color: #527c4e;}</style></head><body> <a href="javascript:void(0);" class="btn">确 定</a></body></html>

应该结合JS能有更炫的效果，继续研究中。。。先说这么多，大家有可以参考的资料吗？