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/