What is the difference between pseudo-class and pseudo-element? -PHP Chinese website Q&A-What is the difference between pseudo-classes and pseudo-elements? -PHP Chinese website Q&A
Please watch and learn.
伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式。伪类的定义使用：单冒号加上名称，如 mydiv:hover。伪类的选择对象可能会随着用户操作文档而发生变化，比如当用户删除某些节点后，会影响子元素（nth-child）伪类的选择。伪类选择元素的依据不是名称、属性或内容，而是根据特征（比如状态或顺序）。
伪元素（pseudo-element）是另外一个概念，其设计意图和伪类一样，是为了能支持根据文档树以外的信息来进行格式化。伪元素本质上是一个元素，只是它一般需要依附在一个已有元素上，作为这个元素的“部分”或“补充”。比如::first-line或::after。CSS2.1规范中引入的新的伪元素语法是双冒号::，但为了和历史版本兼容，一些之前引入的伪元素仍然可以使用单冒号语法。和伪类用来过滤元素不同，伪元素用来过滤内容或创建补充内容，在这些内容外包装一个虚拟的容器，然后应用特定的样式。我们可以在伪元素上应用伪类。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
What is the difference between pseudo-class and pseudo-element? -PHP Chinese website Q&A-What is the difference between pseudo-classes and pseudo-elements? -PHP Chinese website Q&A
Please watch and learn.
伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式。伪类的定义使用：单冒号加上名称，如 mydiv:hover。伪类的选择对象可能会随着用户操作文档而发生变化，比如当用户删除某些节点后，会影响子元素（nth-child）伪类的选择。伪类选择元素的依据不是名称、属性或内容，而是根据特征（比如状态或顺序）。
伪元素（pseudo-element）是另外一个概念，其设计意图和伪类一样，是为了能支持根据文档树以外的信息来进行格式化。伪元素本质上是一个元素，只是它一般需要依附在一个已有元素上，作为这个元素的“部分”或“补充”。比如::first-line或::after。CSS2.1规范中引入的新的伪元素语法是双冒号::，但为了和历史版本兼容，一些之前引入的伪元素仍然可以使用单冒号语法。和伪类用来过滤元素不同，伪元素用来过滤内容或创建补充内容，在这些内容外包装一个虚拟的容器，然后应用特定的样式。我们可以在伪元素上应用伪类。