原文链接 http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html
------------------------------------------------------------------------------------------------------------------------------------
伪类 VS 伪元素
这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下：
伪类：作用对象是整个元素
首先，来看几个伪类
a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}如你所见，尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。
伪元素：作用于元素的一部分
还是来看几个例子：
p::first-line {color: #555}p::first-letter {color: #666}a::before {content : "hello world";}如你所见，伪元素作用于元素的一部分：一个段落的第一行 或者 第一个字母。
更加神奇的是可以作用于并未加入HTML的对象，这就是:before 和 :after，也就是本文要说的内容。
:before VS ::before
为什么有两种写法呢？它们的效果一样么？
答案是一样的，来看一个例子：
/*CSS2*/.example:before {}.example:after {}.example:first-child {} /*CSS3*/.example::before {}.example::after {}.example::first-child {}
在CSS2中，我们使用一个冒号表示伪类和伪元素。然而，为了区别已有的这两个，CSS3专门为伪元素设计了两个冒号。
IE再次毁了一切
所有现代浏览器都支持 :: 语法，但是悲剧的IE8不支持，大多数开发者为了兼容IE，使用CSS2的 :。为了保持简单一致，本文后面的部分都是用CSS2格式。
什么是 :before 和 :after
:before 和 :after 使你可以通过CSS加入一些内容，从而避免了HTML的凌乱。特别是一些装饰性的元素，从语义化考虑本就不该出现在HTML中。
举个例子，你的网站有一些电话号码，你希望在它们前面加一个icon☎。你可以用 :before 伪元素实现这个效果：
.phoneNumber:before { content: "☎"; font-size: 15px;}这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样，你可以猜到会出现什么效果了
.phoneNumber:after { content: "$#9742"; font-size: 15px;}一个简洁的例子
最近，:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签，我们可以使用伪元素添加额外的可样式化的元素或层级。
来看一个例子，这是一个简单的按钮，圆形并有红色的渐变。
.button {height: 100px;width: 100px;position: relative;margin: 50px;color: white;text-align: center;line-height: 100px;/*Rounded Corners and Shadows*/-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 2px2px4pxrgba(0,0,0,0.4);-moz-box-shadow: 2px2px4pxrgba(0,0,0,0.4);box-shadow: 2px2px4pxrgba(0,0,0,0.4);/*Ridiculous Gradient Syntax*/background: #e51d16; /* Old browsers */background: -moz-linear-gradient(top, #e51d160%, #b21203100%); /* FF3.6+ */background: -webkit-gradient(linear, lefttop, leftbottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #e51d160%,#b21203100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #e51d160%,#b21203100%); /* Opera 11.10+ */
|
