:focus 和 :active 选择器的区别

:focus Selector：它通常适用于表单元素或可以使用键盘或鼠标聚焦的元素，如输入框、文本区域。当我们为该特定元素使用键盘的“tab”键时，一个元素处于焦点状态。焦点状态将保持不变，直到用户将选项卡切换到另一个元素或单击。

句法：

:focus {
    // CSS Property
}

示例：此示例说明了 :focus 选择器。

  

    
      
    

  

    

        
GeeksforGeeks
          
        
            Focus or Click here
        
    

  
                    

输出

• 在聚焦按钮之前：
  
• 按钮对焦后：
  

说明：在上面的示例中，使用以下 CSS 属性来设置 :focus 选择器。

button:focus {
    color: green;
    background-color: white;
    font-style: italic;
}

这些 CSS 属性用于设置按钮的样式。

• 文本颜色将更改为绿色。
• 按钮的背景颜色将更改为白色。
• 字体样式将从正常更改为斜体。

active：它通常适用于按钮和锚标签。当用户点击鼠标时触发。活动状态将保持不变，直到用户按住鼠标。

句法：

:active {
    // CSS property
}

示例：此示例说明了 :active 选择器。

  

    
      
    

  

    

        
GeeksforGeeks
          
        
            Focus or Click here
        
        

  
                    

输出

• 活动状态前(点击按钮前)：
  
• 点击按钮后：
  

说明：在上面的例子中，使用以下 CSS 属性来设置 :active 选择器。

button:active {
    background-color: green;
    font-family: 'Courier New', Courier, monospace
}

使用这些代码行，我们正在更改聚焦按钮的样式。

• 按钮的背景颜色将更改为绿色。
• 字体系列将被更改。