什么是伪类(pseudo class)？
pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。
和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。
因此大家需要注意一下几点：
它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。
什么时候使用伪类(pseudo class)？
如果你需要创建一些修饰类图标，或者设计UI的时候，使用伪类是相当方便的
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下
pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。
和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。
因此大家需要注意一下几点：
它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。
什么时候使用伪类(pseudo class)？
如果你需要创建一些修饰类图标，或者设计UI的时候，使用伪类是相当方便的
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>伪类元素的基本用法</title> <style> #example:before{ content:"$我在前面"; color:red;} #example:after{ content:"我在后面￥"; color:red;} </style> </head> <body> <div id="example">我是内容部分</div> </body> </html>
除了插入文字内容，还可以指定其他内容：
p:before {
content: url('img.jpg');
}
a:after {
content: attr(href);
}
attr()函数会返回指定元素对应属性的值
再看一个关于:before :after的实例及兼容写法
<!doctype html> <html> <head> <meta charset="utf-8"> <title>理解伪元素 :Before 和 :After</title> <style> div{ width:300px; height:240px; background:#2A5F55; color:#fff; float:left;} div:first-child{ border-right:1px solid #fff;} .demo:before ,.demo:after ,span{ content:""; display:block; width:80px; height:80px; line-height:80px; text-align:center; background:#D4BF00; margin:0 auto;} .demo:before ,.before{ background:#800000; content:"before";} .demo:after ,.after{ background:#FF3F55; content:"after";} </style> </head> <body> <div class="demo"> <!--<before></before>--> <span>content</span> <!--<after></after>--> </div> <div> <span class="before">before</span> <span>content</span> <span class="after">after</span> </div> <p style="clear:both; padding:10px;"><strong>结论:</strong>:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素</p> </body> </html>
最后再来一个伪元素:before :after结合css3的八卦图实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>伪类元素的应用——八卦图案</title> <style> h3{text-align:center;} #bagua{ width:192px; height:96px; margin:0 auto; border-radius:100%; background:#fff; border-color:#000; border-style:solid; border-width:4px 4px 100px 4px; position:relative;} #bagua:before{ position:absolute; top:50%; left:0; content:""; background:#fff; width:24px; height:24px; border:36px solid #000; border-radius:100%;} #bagua:after{ position:absolute; top:50%; left:50%; content:""; background:#000; width:24px; height:24px; border:36px solid #fff; border-radius:100%;} </style> </head> <body> <h3>八卦图</h3> <div id="bagua"></div> </body> </html>
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪类和伪元素混淆的由来 最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:) CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分： 伪类用一个冒号表示 :first-child 伪元素则使用两个冒号表示 ::first-line 并且规定，浏览器既要兼容CSS1和2里既存的伪元素的单冒号表示，同时又要不兼容CSS3新引入的伪元素的单冒号表示。后来的结果大家都知道，因为低版本IE对双冒号的兼容问题，几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。这无形中，让这种混淆延续了下来。而CSS3新伪元素的使用到目前为止，还远远不成气候。
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
最后说说浏览器的支持情况
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。
唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。所以，如果你的爱好者是在良好合适的web开发（或者其他具有较搞IE版本的市场），你可以继续自由地使用伪元素。
