UI元素状态伪类选择器

CSS3 UI元素状态伪类选择器

:focus选择器

• :focus选择器被用来指定“表单元素”获得光标焦点时使用的样式，主要在单行文本框text、多行文本框textarea等表单元素获得焦点并输入文本时使用。
• 一般情况下，获取焦点和失去焦点是针对单行文本框text、多行文本框textarea这2个表单元素而言。

    
    
    


    
姓名：
    
邮箱：

浏览器效果

:checked选择器

• 在表单元素中，单选按钮radio和复选框checkbox都具有“选中”和“未选中”状态。在CSS3中，我们可以通过使用:checked选择器来定义选中时的CSS样式。
• 暂时只有Opera浏览器支持:checked选择器。

::selection选择器

• 默认情况下，浏览器中用鼠标选择的网页文本都是“深蓝的背景，白色的字体”显示的。但是有些时候我们并不想要“深蓝的背景，白色的字体”这种显示效果。

  
  
  

  浏览器选取文本时默认样式

    
11122222222
    
22222222222222

:enabled与:disabled选择器

• 在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。`
• 在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。

    
    
    


    

        

            可用:
            
        
        

            禁用:
            
        
    

在浏览器预览效果

:read-write与:read-only选择器

• 在Web表单中，有些表单元素（如输入框、文本域等）有“可读写”和“只读”这2种状态。默认情况下，这些表单元素都处在“可读写”状态。
• 在 CSS3中，我们可以使用:read-write选择器和:read-only选择器来分别设置表单元素的“可读写”与“只读”这两种状态的CSS样式。

    
    
    


    

        

            读写:
            
        
        

            只读:
            
        
    

在浏览器预览效果

::before和::after选择器

• 在CSS3中，我们可以使用::before和::after这两个选择器在元素前面或后面添加内容。这两个选择器常和"content属性"配合使用，使用的场景最多的就是清除浮动和创建小图标。

::before    在元素之前插入内容
::after     在元素之后插入内容'