标签：style c class blog code java
前几天同事问我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能有更炫的效果，继续研究中。。。先说这么多，大家有可以参考的资料吗？
标签：style c class blog code java
原文地址：http://www.cnblogs.com/dujunyanyyy/p/3745221.html
