css中的UI状态伪类选择器怎么使用

这篇文章主要介绍“css中的UI状态伪类选择器怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css中的UI状态伪类选择器怎么使用”文章能帮助大家解决问题。

创新互联成立10多年来，这条路我们正越走越好，积累了技术与客户资源，形成了良好的口碑。为客户提供成都网站建设、网站设计、网站策划、网页设计、国际域名空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等，这些对于网站建设都非常重要，创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案，携手广大客户，共同发展进步。

UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验。

UI状态伪类选择器的特征：指定的样式只有在某种状态下才起作用

表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。

UI状态伪类选择器

选择器	功能描述	版本
E:focused	选择表单中获得焦点的元素	3
E:checked	选择表单中被选中的radio或者checkbox元素	3
E:enabled	选择表单中可用的元素	3
E:disabled	选择表单中不可用（即被禁用）的元素	3
E:valid	选择表单中填写的内容符合要求的元素	3
E:invalid	选择表单中填写的内容不符合要求的元素，如非法的URL或E-Mail，或与 pattern 属性给出的模式不匹配	3
E:in-range	选择表单中输入的数字在有效范围内的元素	3
E:out-of-range	选择表单中输入的数字超出有效范围的元素	3
E:required	选择表单中必填的元素	3
E:optional	选择表单中允许使用required属性，且未指定为required的元素	3
E:read-only	选择表单中状态为只读的元素	3
E:read-write	选择表单中状态为非只读的元素	3
E:default	选择表单中默认处于选取状态的单选框或复选框，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效	3
E:indeterminate	选择器表单中一组单选框中没有任何一个单选框被选取时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定	3

1、E:hover选择器

用来指定当鼠标指针移动到元素上时元素所使用的样式

使用方法：

<元素>:hover{ 
CSS样式 
}

我们可以在“<元素>”中添加元素的type属性。

例：

    


    这是一个链接
    这是另一个链接

运行结果如下图所示：

2、E:active选择器

:active：定义点击链接时的样式。

通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：

    


    这是一个链接
    这是另一个链接

运行结果如下图所示：

3、E:link选择器

:link：定义普通或未访问链接的样式；

通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：

    


    这是一个链接
    这是另一个链接

运行结果如下图所示：

4、E:visited选择器

:visited：定义已经访问过链接的样式；

通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：

    


    这是一个链接
    这是另一个链接

运行结果如下图所示：

5、E:focus选择器

:focus：用来指定元素获得光标聚焦点使用的样式

示例代码如下：

选择器E:hover、E:active和E:focus

姓名：


密码：

6、E:enabled伪类选择器与E:disabled伪类选择器

1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

E:enabled伪类选择器与E:disabled伪类选择器

姓名：


学校：

7、E:read-only伪类选择器与E:read-write伪类选择器

1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。

read-only伪类选择器与E:read-write伪类选择器

姓名：


学校：

8、伪类选择器E:checked、E:default和indeterminate

1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。

checked伪类选择器

房屋状态： 水 电 天然气 宽带

默认的选择项

default伪类选择器

房屋状态： 水 电 天然气 宽带

indeterminate伪类选择器

性别： 男 女

9、伪类选择器E::selection

E:selection伪类选择器用来指定当元素处于选中状态时的样式。

伪类选择器E::selection

10、E:invalid伪类选择器与E:valid伪类选择器

1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

E:invalid伪类选择器与E:valid伪类选择器

11、E:required伪类选择器与E:optional伪类选择器

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

	
		
		
		
	
	
		
E:required伪类选择器与E:optional伪类选择器
		

			姓名：
			
			
			学校：
	

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

E:in-range伪类选择器与E:out-of-range伪类选择器

 

各UI元素状态伪类选择器受浏览器的支持情况

选择器	Firefox	Safari	Opera	IE8	Chrome
E:hover	√	√	√	√	√
E:active	√	√	√	x	√
E:focus	√	√	√	√	√
E:enable	√	√	√	x	√
E:disable	√	√	√	x	√
E:read-only	√	x	√	x	x
E:read-write	√	x	√	x	x
E:checked	√	√	√	x	√
E:default	√	x	x	x	x
E:indeterminate	√	√	x	√	√
E:selection	√	√	√	x	√

关于“css中的UI状态伪类选择器怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

分享文章：css中的UI状态伪类选择器怎么使用
路径分享：http://jkwzsj.com/article/gsdodc.html