CSS伪类和伪元素

• 1. 什么是伪类和伪元素
  • 1.1. 伪类
  • 1.2. 伪元素
  • 1.3. 伪类与伪元素的区别
• 2. 使用

1. 什么是伪类和伪元素

伪类就是假的类
伪元素就是假的元素

1.1. 伪类

作用：

1. 格式化DOM树以外的信息，比如标签的:link, :visited等。这些本身是不存在于DOM树中的。
2. 获取不能被常规CSS选择器获取到的信息。比如获取第一个子元素，我们可以用:first-child，常规方式一般是获取不到的。

1.2. 伪元素

伪元素可以创建一些文档语言无法创建的虚拟元素

1. 文档语言没有能描述元素第一个字母或者第一行的，可以用伪元素::first-letter :first-line
2. 伪元素可以创建原文档不存在的内容，比如::before ::after

1.3. 伪类与伪元素的区别

1. 伪类主要是弥补CSS选择器不足的情况，更好的获取数据

2. 伪元素主要是创建了虚拟的元素，我们可以向其中添加内容或者样式。

3. 伪类用单冒号

4. 伪元素用双冒号

2. 使用

  
  
  
  
  



  

    

      
first
      
second
    
    
this is a p
    
this is another
    
this is last p
    this is a span
    
?!*%this is a nav
    

      学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素学习伪元素

    
  

结果：

伪类和伪元素