我记的在《木兰辞》里面有一句“雄兔脚扑朔， 雌兔眼迷离； 双兔傍地走， 安能辨我是雄雌？”我觉得我现在就是那个辨雌雄的人。因为我发现了一个很可怕的地方——我竟然对伪类和伪元素的概念产生了混淆，经过学习分析之后我发现了这种混淆其实是源自我对两者概念的不清。这可太可怕了……我决定以坐怀不乱的心态，一定要把两者给彻底搞清楚。
坐怀不乱
老方法就是查资料呗，还能怎么办。这一查才发现原来和我一样困惑的人还真不少，不过他们其中有些人已经找到了问题的答案。可喜可贺啊~不过我也不能落后。
首先可以肯定的是为了区分两者w3c已经在css3中已经明确规定了伪类用单引号例如:hover，伪元素使用双引号例如::before。这点在W3C关于CSS3的文档 pseudo-element double colon syntax中有详细的描述。
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
翻译：请注意，CSS3中书写伪元素的新方法是使用双冒号，如后：：{…}，这样做是为了将它们与伪类区分开来。所以有时候你会在CSS文件中看到这个书写方式。然而CSS3还是允许老方法来写伪元素，就是用单引号。考虑到向后兼容的问题，我们建议你还是保持单引号的习惯。
个人觉得，在不考虑兼容的前提下，我认为还是应该养成好习惯，该双引号的就双引号，改单引号的就单引号。就算统一书写单引号，至少在看到伪元素的时候脑海中一定要冒出来“这货是双引号”的念头。
先了解了两者的书写上的差异，也是为了后面打好基础。继续把资料。看了W3C的解释，我看的是一脸懵逼啊。来来来~和我一起懵逼！W3C对两者的描述5.10 Pseudo-elements and pseudo-classes中这样写道。
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
翻译：CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。
一脸懵逼
看了别人的例子之后我才发现，我是进入思维惯性了。不说那么多了，直接上例子吧。例子的好处多多的~我们来对比看下伪类:first-child和伪元素::first-letter两者的区别。
先看伪类:first-child（添加样式到第一个子元素）
/*CSS*/
p>i:first-child {color: red}
/*THML*/
<p>
<i>first</i>
<i>second</i>
</p>
如果我们想保持效果，但想换个书写方式。没问题啊，直接写上一个类让<i>first</i>来引用就行了。例如定义了一个类叫.first-color{color:red;} 直接引用<i class="first-color">first</i>两者的效果一样的。伪类嘛果然和类(CLASS)有点渊源。
继续来看伪元素::first-letter（添加样式到第一个字母）
/*CSS*/
p::first-letter {color: red}
/*HTML*/
<p>My name is HanMeimei.</p>
如果这个时候不使用伪元素还想要这样的效果，怎么办？我了个亲娘啊~这可要了命了，只能添加额外的元素了啊<p><span>M</span>y name is HanMeimei.</p>，然后再给<span>添加样式，例如<p><span class="first-color">M</span>y name is HanMeimei.</p>。哦也~这样::first-letter就等于是创建了一个在文档树中根本不存在<span>。
看到这里恍然大悟，两者的区别了吧，那就是：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
不过我还有最终杀招来区分这两者，下面我传授我的毕生绝学给你了……
传授最强装B绝学
我列两个表，一个是伪元素的一个是伪类的。全部都背下来，对~没错是死记硬背下来。这绝对是能区分两货的方便快捷方式了。
| 伪类种类属性 | 描述 | CSS版本 |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
| 伪元素属性 | 描述 | CSS版本 |
|---|---|---|
| ::first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| ::first-line | 向文本的首行添加特殊样式。 | 1 |
| ::before | 在元素之前添加内容。 | 2 |
| ::after | 在元素之后添加内容。 | 2 |
要说东西也不多，排除法记忆，只需要记忆伪元素，那么没有记的全部是伪类了。理解记忆不了，就只能死记硬背了……笨功夫有时候也会有出奇的效果。嗯~ 以后我终于能“辨雌雄”了。哇哈哈哈~~~~
网友评论