视频字幕
CSS的伪类和伪元素是两种特殊的选择器。伪类用于选择处于特定状态或位置的元素，比如鼠标悬停状态。伪元素用于选择元素的特定部分或在元素前后插入生成的内容。它们的语法也不同：伪类使用单冒号，而伪元素使用双冒号来区分。
伪类选择器有很多种类型。最常用的是hover伪类，当鼠标悬停在元素上时触发。active伪类在元素被点击时激活。focus伪类用于表单元素获得焦点时。还有用于链接的visited和link伪类。结构性伪类如first-child选择第一个子元素，last-child选择最后一个子元素，nth-child可以选择特定位置的子元素。
伪元素选择器用于选择元素的特定部分或创建虚拟元素。最常用的是before和after伪元素，它们可以在元素内容的前后插入生成的内容，必须配合content属性使用。first-line伪元素选择元素的第一行文本，first-letter选择第一个字母。selection伪元素可以改变用户选中文本的样式。伪元素实际上创建了不存在于HTML中的虚拟元素。
CSS伪类和伪元素是强大的选择器工具。伪类用于选择元素的特定状态，比如悬停、获得焦点等。伪元素则可以创建虚拟元素，在文档中插入内容或修饰现有元素。它们让我们能够实现更丰富的交互效果和样式。
伪类选择器用冒号表示，选择元素的特定状态。常用的伪类包括hover用于鼠标悬停，focus用于获得焦点，active用于激活状态。还有结构伪类如first-child选择第一个子元素，nth-child选择特定位置的子元素。这些伪类让我们能够响应用户交互和元素状态变化。
伪元素选择器用双冒号表示，可以创建虚拟元素。before和after伪元素能在元素前后插入内容，常用于添加装饰符号。first-letter可以设置首字母的特殊样式，first-line设置首行样式。selection可以自定义文本选中时的外观。这些伪元素为页面增加了丰富的视觉效果。
让我们看一些具体的CSS代码示例。对于伪类，我们可以使用a冒号hover来设置链接悬停时的样式，li冒号first-child来选择列表的第一项，input冒号focus来设置输入框获得焦点时的边框。对于伪元素，p双冒号before可以在段落前添加星号，p双冒号after在段落后添加对勾，p双冒号first-letter可以设置首字母的特殊样式。这些选择器让我们能够精确控制元素在不同状态下的表现。
总结一下，CSS伪类和伪元素是两种不同但都很重要的选择器。伪类使用单冒号，主要用于选择元素的特定状态，如悬停、获得焦点等交互状态，以及元素在文档中的结构位置。伪元素使用双冒号，可以创建虚拟元素，在现有元素前后插入内容或选择元素的特定部分进行样式设置。掌握这些选择器能让我们创建更丰富的用户界面和交互效果。