伪类和伪元素是大部分同学都耳熟能详的名字，但是确实有很多人分不清它们的区别，以至于混淆了概念。而当概念混淆的时候，往往意味着你不会经常使用它，怕出错，怕用不好。而这也会极大地影响你的效率。你要写很多用几行代码就可以完成的工作……所以，花点时间梳理一下每一个看似细小的概念，这会让你的编程更有效率。让我们进入正题。伪类和伪元素的区别其实很简单，从字面上就能理解。他们有一个共同的修饰语“伪”，那么“伪”是什么意思呢？这只是假的。所以，伪类就是假类，伪元素就是假元素，这就是它们字面上的区别。接下来，让我们再看看定义。1.CSS3给出的定义是：引入伪类概念，允许基于文档树之外的信息或其他简单选择器无法表达的信息进行选择。粗略翻译的意思是：伪类的目的是通过选择器格式化DOM树之外的信息和常规CSS选择器无法获取的信息。通过以上概念，我们知道伪类有两个作用：1.格式化DOM树以外的信息。例如：标签的:link、:visited等。DOM树中不存在此信息。2.常规CSS选择器获取不到的信息。比如：获取第一个子元素，我们用常规的CSS选择器是获取不到的，但是我们可以通过：first-child来获取。2.CSS3对伪元素的定义如下：伪元素在文档语言指定的范围之外创建关于文档树的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者引用这些否则无法访问的信息。伪元素还可以为作者提供一种引用源文档中不存在的内容的方法（例如，::before和::after伪元素可以访问生成的内容）。大致翻译过来的意思是：伪元素可以创建文档语言无法创建的虚元素。例如：文档语言没有描述元素内容首字母或首行的机制，但是伪元素可以（::first-letter,::first-line）。同时，伪元素还可以创建源文档中不存在的内容，如使用::before或::after。3、伪类和伪元素的区别（CSS3下的区别）通过以上的概念，我们可以知道伪类和伪元素最本质的区别：伪类实际上弥补了CSS选择器的不足并且习惯于更轻松地获取信息；HTML： p文本 标签的内容变了是红色的}这里有必要强调一下：first-child和：first-of-type的区别。如果你的CSS写成：p:first-child{color:red;}页面不会改变，因为 元素不是父元素 p文本 CSS Hi, 我在学习伪元素 标签改成 ???我在学习伪元素 我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素-元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素 我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素-元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素，我在学习伪元素
CSS：li:first-child{颜色：红色；}//选择器不能直接选择第一个子元素//伪类弥补了选择器的不足，伪元素实质上创建了一个虚拟容器（元素），我们可以在其中添加内容或样式。HTML:
CSS：li:first-child{颜色：红色；//第一个li会变成红色}2:last-child匹配最后一个子元素。HTML：
CSS：li:last-child{color:red;//最后一个li会变成红色}3:first-of-type匹配属于其父元素的特定类型的第一个子元素。HTML：h1文本
h1文本
h1文本2
标签的内容变成红色(h1text2)}4.2伪元素1::before在被选元素之前插入内容。需要指定内容属性来插入内容。HTML:
