CSS伪类
css中的所有伪类。(还有选择)
简单实例：
a:link{ color:red; /*未访问的连接 */ } a:visited{ color:green; /*已经的连接*/ } a:hover{ color:black; /*当鼠标悬浮在连接上的时候*/ } a:active{ color:yellow; /*被选中的连接 就是当鼠标按下去（选中） 当还没有抬起*/ }
这里还要注意一哈顺序：
css定义中；a:hover 必须位于a:link和a:visited之后，才能生效；
css定义中；a:active 必须位于a:hover 之后 才能生效；
input:focus{ background-color:yellow; }
:first-child伪类
如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> p:first-child { font-weight: bold; } p:before{ content:"-p之前的东西"; color:green; } p:after { content:"-p之后的东西"; color:red; } </style> </head> <body> <P>第一个p</P> <P>第二个p</P> <P>第三个p</P> <P>第四个p</P> </body> </html>
为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。
:after在IE8中运行，必须声明<!DOCTYPE>
接下来继续我们的after和before的学习使用滴呀
需要注意的是：
如果没有我们content属性；伪元素将没有任何作用；同时插入的内容，是一个行内元素；
并且在我们的html代码中是看不到滴呀
我们还可以给content中指定图片
p:before{ content:url(images/02.jpg); width:100px; height:100px; display:block; } p:after{ content:url(images/01.jpg); width:100px; height:100px; display:block; }
你会发现指定的了大小，并没有卵用滴呀，那是因为指定的是content的大小，而不是我们图片的大小滴呀!
将content中内容设置为空，给它添加背景；你就可以理解上面的
p:before{ content:" "; width:100px; height:100px; display:inline-block; background: url(images/01.jpg); } p:after{ content:""; width:100px; height:100px; display:inline-block; background:url(images/02.jpg); }
效果：（这里的display，我用的是：inline-block）
我们还可以在content中，返回指定的属性；
content:attr()
如：
a:after{ content:attr(href);/*将返回元素指定的属性呀*/ }
效果：
接下来我们看一些实例滴呀：
实例一：
div:before{ content:open-quote; } div:after{ content:close-quote; }
初级效果：
再加css
div:before { content: open-quote; font-size: 24px; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; left: 0; top: 5px; height: 25px; width: 25px; border-radius: 25px; } div:after { content: close-quote; font-size: 24px; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; bottom: 2px; left: 210px; height: 25px; width: 25px; border-radius: 25px; }
效果：
更多的经常部分井参考：
http://blog.jobbole.com/49173/