详解CSS中的伪类与伪元素及2者间的差别

CSS伪类的定义及功效
CSS伪类(Pseudoclasses)是挑选符的螺栓，用来特定1个或与其有关的挑选符的情况。它们的方式是selector:pseudoclass{property:value;}，简易地用1个半角英文冒号(:)来分隔挑选符和伪类。
CSS许多的提议并沒有获得访问器的适用，但有4个能够安全性应用的用在联接上的CSS伪类。
1.link用在为浏览的联接上。
2.visited用在早已浏览过的联接上。
3.hover用于电脑鼠标光标置于其上的联接。
4.active用于得到聚焦点(例如，被点一下)的联接上。
比如：

留意：
虽然CSS给予你绕开的操纵权，用不一样的色调表明早已浏览过的联接是1个很好的习惯性，由于许多客户還是这样预期的。CSS伪类(除hover)不常见，恐怕也沒有以往常见。因而，它沒有以往那样有效了。但假如你能搜集客户的建议，你会发现应当应用它。
传统式上，联接文字是蓝色的，已浏览的联接是紫色的。或许，这是最合理、最有效的色调。但是，随着着CSS的普遍发展趋势，这类色调不容易是平时的了，客户也已不假定联接务必是蓝色或紫色的。
你应当还可以在除联接的别的元素上应用hover伪类。悲剧的是，InternetExplore其实不适用。这简直1个巨大的苦恼。

伪元素
具体上来讲，CSS 中的伪元素在HTML上是不存在的，应用的机会一般全是对于某样元素独特解决时才会用到
常见的 pseudo-element：
::first-line
能够特定 p 元素第1行的款式
::first-letter
能够特定 p 元素第1个字的款式
::selection
界定应用者反白后的实际效果
::before
在元素以前插进內容
::after
在元素以后插进內容
案例 HTML

first-line and first-letter

伪类和伪元素的差别：
最先，阅读文章 w3c 对二者的界定：
1.CSS 伪类用于向一些挑选器加上独特的实际效果。
2.CSS 伪元素用于将独特的实际效果加上到一些挑选器。
能够确立两点，第1二者都与挑选器有关，第2便是加上1些“独特”的实际效果。这里独特指的是二者叙述了别的 css 没法叙述的物品。
伪类类型

伪元素类型

差别
这里用伪类 :first-child 和伪元素 :first-letter 来开展较为。

//伪类 :first-child 加上款式到第1个子元素
假如大家不应用伪类，而期待做到上述实际效果，能够这样做：

即大家给第1个子元素加上1个类，随后界定这个类的款式。那末大家接着看看为元素：

//伪元素 :first-letter 加上款式到第1个字母
那末假如大家不应用伪元素，要做到上述实际效果，应当如何做呢？

即大家给第1个字母加上1个 span，随后给 span 提升款式。
二者的差别早已出来了。那便是：

伪类的实际效果能够根据加上1个具体的类来做到，而伪元素的实际效果则必须根据加上1个具体的元素才可以做到，这也是为何她们1个称为伪类，1个称为伪元素的缘故。

总结
伪元素和伪类之因此这么非常容易搞混，是由于她们的实际效果相近并且写法相仿，但具体上 css3 以便区别二者，早已确立要求了伪类用1个冒号来表明，而伪元素则用两个冒号来表明。

但由于适配性的难题，因此如今绝大多数還是统1的单冒号，可是抛开适配性的难题，大家在撰写时应当尽量培养好习惯性，区别二者。