伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。区别总结如下：
CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
属性描述:active向被激活的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式
备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。
css伪元素 (Pseudo-elements)：用于向某些选择器设置特殊效果，是对元素中的特定内容进行设置和操作，操作层次比伪类更深，故动态性比伪类要差。
属性描述:first-letter向文本的第一个字母添加特殊样式:first-line向文本的首行添加特殊样式:before在元素之前添加内容:after在元素之后添加内容
w3c 对两者的定义：
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
区别
这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。
p>i:first-child {color: red} first second
//伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red} first second
即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看伪元素：
p::first-letter {color: red}i am stephen lee.
//伪元素 ::first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？
.first-letter {color: red}I am stephen lee.
企业黄页-大众投资指南整站 asp.net 2.0 大众投资指南是基于Asp.Net(2.0)+C#+Access(sql2000)的企业黄页类程序，是基于web2.0 模式的网站。 贴吧和黄页都有采集功能 主程序包括分类信息和商家黄页两大模块。分类信息支持二级分类，商家黄页支持二级地区分类及二级行业分类。程序采用了伪静态(url重写)技术，可选生成纯静态首页。 一、分类信息仿百度贴吧编写，可以分别对游客及会员设置不同的审核条件。会员发布信息
0 查看详情 
即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
以上就是CSS伪类和伪元素的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608406.html
微信扫一扫 
支付宝扫一扫 
