css中的UI状态伪类选择器怎么使用
导读：本文共8495.5字符，通常情况下阅读需要28分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇文章主要介绍“css中的UI状态伪类选择器怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css中的UI状态伪类选择器怎么使用”文章能帮助大家解决问题。 UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，... ...
目录
(为您整理了一些要点),点击可以直达。这篇文章主要介绍“css中的UI状态伪类选择器怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css中的UI状态伪类选择器怎么使用”文章能帮助大家解决问题。
UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验。
UI状态伪类选择器的特征：指定的样式只有在某种状态下才起作用
表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。
1、E:hover选择器
用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{CSS样式}我们可以在“<元素>”中添加元素的type属性。
例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head><body><ahref=''>这是一个链接</a><ahref=''>这是另一个链接</a></body></html>运行结果如下图所示：
2、E:active选择器
:active：定义点击链接时的样式。
通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>这是一个链接</a><ahref=''>这是另一个链接</a></body></html>运行结果如下图所示：
3、E:link选择器
:link：定义普通或未访问链接的样式；
通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}</style></head><body><ahref=''>这是一个链接</a><ahref=''>这是另一个链接</a></body></html>运行结果如下图所示：
4、E:visited选择器
:visited：定义已经访问过链接的样式；
通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc;color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>这是一个链接</a><ahref=''>这是另一个链接</a></body></html>运行结果如下图所示：
5、E:focus选择器
:focus：用来指定元素获得光标聚焦点使用的样式
示例代码如下：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>选择器E:hover、E:active和E:focus</title><style>input[type="text"]:hover{background:green;}input[type="text"]:focus{background:#ff6600;color:#fff;}input[type="text"]:active{background:blue;}input[type="password"]:hover{background:red;}</style></head><body><h2>选择器E:hover、E:active和E:focus</h2><form>姓名：<inputtype="text"placeholder="请输入姓名"><br/><br/>密码：<inputtype="password"placeholder="请输入密码"></form></body></html>
6、E:enabled伪类选择器与E:disabled伪类选择器
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>E:enabled伪类选择器与E:disabled伪类选择器</title><style>input[type="text"]:enabled{background:green;color:#ffffff;}input[type="text"]:disabled{background:#727272;}</style></head><body><h2>E:enabled伪类选择器与E:disabled伪类选择器</h2><form>姓名：<inputtype="text"placeholder="请输入姓名"disabled><br/><br/>学校：<inputtype="text"placeholder="请输入学校"></form></body></html>
7、E:read-only伪类选择器与E:read-write伪类选择器
1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>read-only伪类选择器与E:read-write伪类选择器</title><style>input[type="text"]:read-only{background:#000;color:green;}input[type="text"]:read-write{color:#ff6600;}</style></head><body><h2>read-only伪类选择器与E:read-write伪类选择器</h2><form>姓名：<inputtype="text"placeholder="请输入姓名"value="winson"readonly><br/><br/>学校：<inputtype="text"placeholder="请输入学校"></form></body></html>
8、伪类选择器E:checked、E:default和indeterminate
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>checked伪类选择器</title><style>input[type="checkbox"]:checked{outline:2pxsolidgreen;}</style></head><body><h2>checked伪类选择器</h2><form>房屋状态：<inputtype="checkbox">水<inputtype="checkbox">电<inputtype="checkbox">天然气<inputtype="checkbox">宽带</form></body></html>
默认的选择项
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>default伪类选择器</title><style>input[type="checkbox"]:default{outline:2pxsolidgreen;}</style></head><body><h2>default伪类选择器</h2><form>房屋状态：<inputtype="checkbox"checked>水<inputtype="checkbox">电<inputtype="checkbox">天然气<inputtype="checkbox">宽带</form></body></html>
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>indeterminate伪类选择器</title><style>input[type="radio"]:indeterminate{outline:2pxsolidgreen;}</style></head><body><h2>indeterminate伪类选择器</h2><form>性别：<inputtype="radio">男<inputtype="radio">女</form></body></html>
9、伪类选择器E::selection
E:selection伪类选择器用来指定当元素处于选中状态时的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>伪类选择器E::selection</title><style>::selection{background:green;color:#ffffff;}input[type="text"]::selection{background:#ff6600;color:#ffffff;}</style></head><body><h2>伪类选择器E::selection</h2><inputtype="text"placeholder="文本"></body></html>
10、E:invalid伪类选择器与E:valid伪类选择器
1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>E:invalid伪类选择器与E:valid伪类选择器</title><style>input[type="email"]:invalid{color:red;}input[type="email"]:valid{color:green;}</style></head><body><h2>E:invalid伪类选择器与E:valid伪类选择器</h2><form><inputtype="email"placeholder="请输入邮箱"></form></body></html>11、E:required伪类选择器与E:optional伪类选择器
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>E:required伪类选择器与E:optional伪类选择器</title> <style> input[type="text"]:required{background:red;color:#ffffff;}input[type="text"]:optional{background:green;color:#ffffff;}</style> </head> <body> <h2>E:required伪类选择器与E:optional伪类选择器</h2> <form> 姓名：<inputtype="text"placeholder="请输入姓名"required> <br/> <br/> 学校：<inputtype="text"placeholder="请输入学校"></form> </body></html>12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>E:in-range伪类选择器与E:out-of-range伪类选择器</title><style>input[type="number"]:in-range{color:#ffffff;background:green;}input[type="number"]:out-of-range{background:red;color:#ffffff;}</style></head><body><h2>E:in-range伪类选择器与E:out-of-range伪类选择器</h2><inputtype="number"min="0"max="100"value="0"></body></html>
各UI元素状态伪类选择器受浏览器的支持情况
关于“css中的UI状态伪类选择器怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
css中的UI状态伪类选择器怎么使用的详细内容，希望对您有所帮助，信息来源于网络。