伪类和伪元素的区别

伪类和伪元素的根本区别在于:

它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。

最为混淆的,可能是大部分人都将 :

before 和 :after 这样的伪元素随口叫做伪类,而且即使在概念混淆的情况下,实际使用上也毫无问题——因为即使概念混淆,对真正使用也不会造成多少麻烦:)
CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

目前为止,伪元素在一个选择器里只能出现一次,并且只能出现在末尾。实则,伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分,所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用,没有数量上的限制,只要不是相互排斥的伪类,也可以同时使用在相同的元素上。

伪类的例子有:

:hover
:active
:first-child
:visited
等。

伪元素的例子有:

:first-line
:first-letter
:after
:before

简单的总结,希望对大家有所帮助,如有不对的地方也烦请指出,谢谢!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容