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)

感受

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

- EOF -

5 Comments For This Post

  1. 按能否归类这个概念区分:

    伪类:伪装的类,页面上有一部分元素可以归为这类。比如:link,可以将页面上所有链接的元素归为这类

    伪元素:不能归类,比如 :after,不能将页面上所有元素的下一个兄弟节点归为一类,必须指定前置选择器

    回复该留言

    @pw, 昨天看见个这样的解释~
    A pseudo-element is not the same as a pseudo-class. While a pseudo-class matches elements that actually exist, pseudo-elements target “virtual” elements that can change depending on the actual HTML.

    from: http://www.impressivewebs.com/css-terms-definitions/

  2. 原来伪元素只允许出现在最后一个简单选择器的末尾,还以为是IE6的bug呢

    回复该留言

  3. 这几个伪类平时比较少用到 :mrgreen:

    回复该留言

  4. 伪类针对的是某一元素的某种“状态”;(自身状态)
    伪元素则指的是跟选择符所匹配元素相关的“某个元素”;(相关元素)

    比如::link, :visited, :hover, :active, :focus, :blur, :selected, :checked 这些实际上都是指所选择元素本身的某种状态,伪类。

    而 :first-letter, :first-line, :before, :after 实际上是所选择元素下的文本节点(按照xml概念理念,一个标签对应的是一个元素节点element,而其中的文字是一个文本节点text node)的第一个字符、第一行字符、所有子元素前面添加的匿名节点和所有子元素后面添加的匿名节点。都不是针对元素本身或本身的某种状态,而是针对相关的另一个元素,伪元素。

    回复该留言

    @小李刀刀, :smile: 这位童鞋解释得很通俗易懂,谢谢哈,学习了!

    @小李刀刀,css中,伪类,分为UI伪类(:link,:hover)和结构伪类(:first-child,:nth-child),若如你所说,感觉更容易混淆了。

Leave a Reply

:wink: :twisted: :surprised: :smile: :sad: :rolleyes: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow: