CSS中的伪类与伪元素

起因

今天在了解CSS优先级与继承相关概念的时候，接触到了这两个东东。之前看见类似:after的东东时，均会认为是伪类（Pseudo-classes），但是实际不然，在CSS2规范中对伪类（Pseudo-classes）以及伪元素（Pseudo-elements）实际做了不同的解释。

释疑

对于这种很纠结的问题，其实最好的答案就在规范里面，立马Google出CSS2规范，里面果真具体定义了， 请猛击这里查看。不过规范毕竟是规范，看了不让人晕就不叫规范了=，=


我仔细看了一遍又一遍还是不怎么能够解释得清他们直接的区别，so木有办法，只好硬记下了:first-line, :first-letter, :before, :after这几个就是伪元素，其余都为伪类~希望有DX可以帮忙具体总结总结两者差异吧，或者有时间再好好研读研读规范……


不过这里不得不赞一下CSS3的标准草案，里面终于把这两个概念从代码上做了区分，对于伪类的代码不变，但是对于伪元素，则使用两个::作为前缀，因此这样就很容易区分了， 可以猛击这里查看。

为何这里如此纠结两者的区别呢？

        首先第一点是在计算一个选择器的优先级时，伪类和伪元素的权重是不同的，因此在比较细节的地方需要纠结；

        其次是伪类允许在选择器的任何位置，但是伪元素只允许出现在最后一个简单选择器的末尾（Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector）

        在CSS3的草案中还提到，每个选择器中只允许出现一个伪元素，未来版本可能会允许多个（Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector）

感受

确实，前端这潭水真是太深太深了，任何一个细小的地方都可以引发很多讨论。这时候规范确实是个好东东，虽然那玩意儿确实不是给普通人读的，只是遇到纠结问题去查阅查阅确实会很有收获滴~努力学习吧~

-------------------------------------------------------------------------------------------------

伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。
 
从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。

伪元素产生新对象，在Dom中看不到，但是可以操作；

伪类是Dom中一个元素的不同状态；

-------------------------------------------------------------------------------------------------

伪类针对的是某一元素的某种“状态”；（自身状态）
伪元素则指的是跟选择符所匹配元素相关的“某个元素”；（相关元素）
比如：:link, :visited, :hover, :active, :focus, :blur, :selected, :checked 这些实际上都是指所选择元素本身的某种状态，伪类。
而 :first-letter, :first-line, :before, :after 实际上是所选择元素下的文本节点（按照xml概念理念，一个标签对应的是一个元素节点element，而其中的文字是一个文本节点text node）的第一个字符、第一行字符、所有子元素前面添加的匿名节点和所有子元素后面添加的匿名节点。都不是针对元素本身或本身的某种状态，而是针对相关的另一个元素，伪元素。