CSS |伪类

CSS 中的伪类用于定义元素的特殊状态。它可以与 CSS 选择器结合使用，根据现有元素的状态为现有元素添加效果。例如，当用户将鼠标悬停在元素上或访问链接时更改元素的样式。所有这些都可以使用 CSS 中的伪类来完成。

请注意，伪类名称不区分大小写。

句法：

selector: pseudo-class{
     property: value;
}

CSS中有很多伪类，但最常用的如下：

• :hover 伪类：这个伪类用于在我们的鼠标指针悬停在元素上时为元素添加特殊效果。下面的示例演示了当您的鼠标进入框区域时，其背景颜色从黄色变为橙色。
  例子：

  
  
  
      
      
  
    
  
      
  Geeks For Geeks
      
  :hover Pseudo-class
      
  
          My color changes if you hover over me!
      
  
                      
  

  输出：
  

• :active 伪类：这个伪类用于选择一个元素，当用户点击它时会被激活。下面的示例演示了当您单击该框时，其背景颜色会发生片刻变化。

  例子：

  
  
  
      
      
  
    
  
      
  Geeks For Geeks
      
  :active Pseudo-class
      
  
          My color changes for a moment if you click me!
      
  
                      
  

  输出：
  

• :focus 伪类：该伪类用于选择用户当前关注的元素。它适用于表单中使用的用户输入元素，并在用户点击它时立即触发。在以下示例中，当前聚焦的输入字段的背景颜色会发生变化。

  例子：

  
  
  
      
      
  
    
  
      
  Geeks For Geeks
      
  :focus Pseudo-class
      
  
          Username:
          
                    
          Email-Id:
          
                    
          Password:
          
      
  
                      
  

  输出：
  

• :visited 伪类：该伪类用于选择用户已经访问过的链接。在以下示例中，链接的颜色在访问后会发生变化。

  例子：

  
  
  
      
      
  
    
  
      
  Geeks For Geeks
      
  :visited Pseudo-class
        
      
  
          
              My color changes once you vist this link
          
      
  
                      
  

  输出：