核心产品
帮助中心
时间：2021-05-08
所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！
浏览器兼容性：
E:hover 支持firefox、safari、Opera、ie8、chrome ------------
E:active 支持firefox、safari、Opera、chrome 不支持ie8
E:focus 支持firefox、safari、Opera、ie8、chrome -------------
E:enabled 支持firefox、safari、Opera、chrome 不支持ie8
E:disabled 支持firefox、safari、Opera、chrome 不支持ie8
E:read-only 支持firefox、Opera 不支持ie8、safari、chrome
E:read-write 支持firefox、Opera 不支持ie8、safari、chrome
E:checked 支持firefox、safari、Opera、chrome 不支持ie8
E::selection 支持firefox、safari、Opera、chrome 不支持ie8
E:default 只支持firefox ------------
E:indeterminate 只支持chrome ------------
E:invalid 支持firefox、safari、Opera、chrome 不支持ie8
E:valid 支持firefox、safari、Opera、chrome 不支持ie8
E:required 支持firefox、safari、Opera、chrome 不支持ie8
E:optional 支持firefox、safari、Opera、chrome 不支持ie8
E:in-range 支持firefox、safari、Opera、chrome 不支持ie8
E:out-of-rang 支持firefox、safari、Opera、chrome 不支持ie8
下面就其使用做详细的说明;
1、选择器E:hover、E:active和E:focus
1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{
CSS样式
}
我们可以在“<元素>”中添加元素的type属性。
例：
input[type="text"]:hover{
CSS样式
}
2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="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> <h1>选择器E:hover、E:active和E:focus</h1> <form> 姓名：<input type="text" placeholder="请输入姓名"> <br/> <br/> 密码：<input type="password" placeholder="请输入密码"> </form> </body> </html>2、E:enabled伪类选择器与E:disabled伪类选择器
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="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> <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1> <form> 姓名：<input type="text" placeholder="请输入姓名" disabled> <br/> <br/> 学校：<input type="text" placeholder="请输入学校"> </form> </body> </html>3、E:read-only伪类选择器与E:read-write伪类选择器
1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
4、伪类选择器E:checked、E:default和indeterminate
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
默认的选择项
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>default伪类选择器</title> <style> input[type="checkbox"]:default{ outline: 2px solid green; } </style> </head> <body> <h1>default伪类选择器</h1> <form> 房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带 </form> </body> </html> <h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>indeterminate伪类选择器</title> <style> input[type="radio"]:indeterminate{ outline: 2px solid green; } </style> </head> <body> <h1>indeterminate伪类选择器</h1> <form> 性别： <input type="radio">男 <input type="radio">女 </form> </body> </html>5、伪类选择器E::selection
1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪类选择器E::selection</title> <style> ::selection{ background: green; color: #ffffff; } input[type="text"]::selection{ background: #ff6600; color: #ffffff; } </style> </head> <body> <h1>伪类选择器E::selection</h1> <p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p> <input type="text" placeholder="文本"> </body> </html>6、E:invalid伪类选择器与E:valid伪类选择器
1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:invalid伪类选择器与E:valid伪类选择器</title> <style> input[type="email"]:invalid{ color: red; } input[type="email"]:valid{ color: green; } </style> </head> <body> <h1>E:invalid伪类选择器与E:valid伪类选择器</h1> <form> <input type="email" placeholder="请输入邮箱"> </form> </body> </html>7、E:required伪类选择器与E:optional伪类选择器
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
8、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="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> <h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1> <input type="number" min="0" max="100" value="0"> </body> </html>好了以上就是小编为大家整理的css3之UI元素状态伪类选择器实例演示全部内容啦，希望大家继续支持~
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
一、CSS3:default伪类选择器简介CSS3:default伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，
结构(位置)伪类选择器（CSS3):first-child:选取属于其父元素的首个子元素的指定选择器:last-child:选取属于其父元素的最后一个子元素的指
下面一段代码给大家介绍css3类选择器之结合元素选择器和多类选择器用法，具体代码如下所示：Title.p2{font-size:30px;}/*结合元素选择器*
CSS控制元素的某种状态---伪类（用于向某些选择器添加特殊的效果）伪类的语法：元素标签伪类名称{属性：属性值;}a:link:未访问的链接a:hover:鼠标
什么是选择器？选择器的作用是通过它可以找到元素，把css样式传递给元素！css选择器主要分为：基本选择器、属性选择器、组合选择器与伪类选择器四个大类！css基本
