CSS伪类和伪元素

定义伪类：CSS伪类是添加到选择器的关键字，用于指定要选择的元素的特定状态。例如，:hover可用于在用户将鼠标悬停在按钮上时更改按钮的颜色。/*用户悬停的所有按钮*/button:hover{color:blue;}伪类的目的是格式化DOM树之外的信息和常规CSS选择器无法通过选择器获取的信息。伪元素：伪元素是附加在选择器末尾的关键字，允许您修改所选元素特定部分的样式。以下示例中的::first-line伪元素更改段落中第一行文本的样式。/*每个

元素的第一行。*/p::first-line{颜色：蓝色；text-transform:uppercase;}伪类与伪元素一起，它们允许您将样式应用于元素，不仅基于文档的DOM树的内容，而且基于导航等外部因素可以应用样式历史记录（例如:visited），以及内容的状态（例如:checked在某些表单元素上），或鼠标位置（例如:hover让您知道鼠标是否悬停在元素上）以应用样式。分类：伪类::active，为激活的元素添加样式。:focus,为被选元素添加样式。:hover，当鼠标悬停在元素上时，给元素添加样式。:link，为未访问的链接添加特殊样式。:visited，为访问过的链接添加特殊样式。:first-child，为元素的第一个子元素添加特殊样式。:lang，允许作者定义指定元素中使用的语言。伪元素：:first-letter，为文本的第一个字母添加特殊样式。:first-line，为文本的第一行添加特殊样式。:before，在元素之前插入一些内容。:after，在元素之后插入一些东西。区别：下面是一个简单的html列表片段：

• 我是第一列
• 我是第二列

如果要添加到第一列item样式，可以为第一个添加一个类，在这个类中定义对应的样式：

我是第一列
• 我是secondColumn

li.first-item{color:orange}如果我们不需要添加类方法，可以通过设置first:first-child伪类为其添加样式。此时修改后的元素还在文档树中。li:first-child{color:orange}这是另一个简单的html段落片段：

HelloWorld,andwishyouhaveagoodday!

如果你想添加Style，你可以在第一个字母并设置span元素的样式：

HelloWorld,andwishyouhaveagoodday!

.first{font-size:5em;}我们可以通过设置

的:first-letter伪元素来设置它的样式，而不是创建一个元素。在这一点上，它看起来像一个虚拟元素已经被创建和样式化，但它实际上并不存在于文档树中。

HelloWorld，祝你有个美好的一天！

p:first-letter{font-size:5em;}从上面的例子可以看出，伪类的操作对象是文档树元素，而伪元素在文档计数之外创建一个元素。因此，伪类和伪元素的区别在于：没有在文档树之外创建元素。总结：伪类本质上是为了弥补常规CSS选择器的不足，以获取更多的信息；伪元素本质上是创建一个包含内容的虚拟容器；CSS3中伪类和伪元素的语法不同；它们可以同时使用多个伪类，但一次只能使用一个伪元素；