UI 伪类选择器携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 UI元素状

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

UI元素状态伪类选择器，额，这个术语真专业……第一次看到我两眼发懵。

何为伪类?

就是css内置类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}

其实，UI元素状态伪类选择器指的是“UI元素状态”这方面的伪类选择器，很简单。

UI，是用户界面（User Interface）的意思。所谓的UI设计是指对软件的人机交互、操作逻辑、界面美观的综合设计。

UI元素状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。

这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。UI元素状态伪类选择器大多数都是针对表单元素来使用的。

大家可以想想超链接表情有四个状态，当鼠标点击，鼠标悬停，鼠标移开等，都可以设置不同样式。

UI 伪类选择器的使用

UI 伪类选择器是通过元素的状态来选择的一种选择器，通过冒号来定义。

在 CSS3 中有以下几种 UI 伪类选择器。（ps百度发现还有其他很多很多的，然后各种分类。）

选择器	描述
:focus	给获取焦点的元素设置样式。
::selection	给页面中被选中的文本内容设置样式。
:checked	给被选中的单选框或者复选框设置样式。
:enabled	给可用的表单设置样式。
:disabled	给不可用的表单设置样式。
:read-only	给只读表单设置样式。
:read-write	给可读写的表单元素设置样式。
:valid	验证有效。
:invalid	验证无效。

练习1：获得焦点验证

页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变，

新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
  。。。。。
    <style>
      input:focus {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  
  <body>
    姓名：<input type="text" /><br />
    密码：<input type="password" />
  </body>
</html>

预览页面，效果如下：

图片描述

练习2：属性有效性验证

当页面上出现邮箱输入框，我们应该怎么验证邮箱是否正确，同时对于正确错误，怎么把邮箱输入框变颜色。

对于验证是否正确，一般需要使用正则表达式

验证目标满足逻辑

@之前必须有内容且只能是字母（大小写）、数字、下划线(_)、减号（-）、点（.）
@和最后一个.之间必须有内容且只能是字母（大小写）、数字、点（.）、减号（-），且两个点不能紧挨着
最后一个.之后必须有内容且内容只能是字母（大小写）、数字且长度为大于等于2个字节，小于等于6个字节`

那么对应正则表达式

^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$

但是在ui选择器里面，有两个验证有效无效属性，举例如下

举例：页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。

新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
  。。。。。。
    <style>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

预览页面，效果如下：

图片描述

其他属性没有一一验证，大家可以自己试试。