<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
/*
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:focus 选择器用于选取获得焦点的元素。
:active 选择器用于选择活动链接。
*/
input[type="text"]:hover{ background:#0F3;}
input[type="text"]:focus{ background:#f60;}
input[type="text"]:active{ background:#FF0;}
input[type="password"]:hover{ background:#c00;}
</style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
<!--placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。-->
姓名：<input type="text" placeholder="请输入姓名">
<br/>
<br/>
密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
/*
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。
*/
input[type="text"]:enabled{ background:#F60; color:#fff;}
input[type="text"]:disabled{ background:#CF3;}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
网站：<input type="text" placeholder="请输入网站">
</form>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
/*
E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。
只能在谷歌内核上看，或少数内核上可以看，不建议使用
*/
input[type="text"]:read-only{ background:#000; color:#fff;}
input[type="text"]:read-write{ background:#f60;}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="吴者然" readonly>
<br/>
<br/>
网站：<input type="text" placeholder="请输入网站">
</form>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/*
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
:default 不建议使用
*/
input[type="checkbox"]:checked{ outline:2px solid #0F0;}
input[type="checkbox"]:default{ outline:2px solid #0F0;}
</style>
</head>
<body>
<h1>伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">气
<input type="checkbox">光纤
</form>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器E::selection</title>
<style>
/*
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
Firefox 支持替代的 ::-moz-selection。
::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
*/
::selection{ background: green; color: #ffffff;}
::-moz-selection{ background: green; color: #ffffff;}
input[type="text"]::selection{ background: green; color: #ffffff;}
input[type="text"]:-moz-selection{ background: green; color: #ffffff;}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>阅谁问君诵，水落清香浮。</p>
<input type="text" placeholder="文本">
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
/*
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。
*/
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>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
/*
E:required伪类选择器用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。
E:optional伪类选择器用来指定允许使用required属性，且未指定required属性的input元素、select元素以及textarea元素的样式。
*/
input[type="text"]:required{ background:red; color:#fff;}
input[type="text"]:optional{ background:green; color:#fff;}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
<!--required 属性规定必需在提交之前填写输入字段。-->
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
网址：<input type="text" placeholder="请输入网址">
</form>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
/*
E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），且实际输入值在该范围内时使用的样式。
E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内（通常通过min属性值与max属性值来限定），但实际输入值在该范围之外时使用的样式。
*/
input[type="number"]:in-range{ color:#fff; background:green;}
input[type="number"]:out-of-range{ color:#fff; background:red;}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span~p{ background:#f60;}
</style>
</head>
<body>
<div>
<span>韵茶</span>
<span>韵茶</span>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<span>韵茶<p>阅谁问君诵，水落清香浮</p></span>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<div>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</div>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
</body>
</html>
效果图：
相关推荐
主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
基于Vant UI框架实现时间段选择器 本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码，供大家参考，具体内容如下 组件代码如下： <template> :title="title" :show-toolbar="showToolbar" :...
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例，分享给大家，具体如下： Mint UI 使用文档：https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍：...
一个jQuery UI时间选择器
400+科技元素 科幻UI 机甲机械类UI，满足科幻UI设计需求，仅供学习使用！！！
CSS3参考手册(css3语法使用查询手册)CHM版，可快速索引和搜索CSS3各种属性值以及具体的用法，说详细介绍有CSS3选择器的各方面知识，这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
systemui，安卓的系统状态栏。联想a65,a60版
jQuery ui带时间的日期选择器代码 jQuery ui带时间的日期选择器代码 jQuery ui带时间的日期选择器代码 jQuery ui带时间的日期选择器代码
jQuery_ui带时间的日期选择器代码
需求：设置时间选择器,只能选择2018-01-01之后切小于当前时间的数据 data() { return { pickerOptions0: { disabledDate: time => { // 使用2018年的毫秒时间戳判断 return time.getTime() Date.now(); } ...
UI 炫酷高仿 Instagram 的图片、视频选择器
该工具包含 android4.0 SystemUI正常版.apk SystemUI无状态栏版.apk 将其改名为SystemUI.apk 覆盖android4.0系统 /system/app/SystemUI.apk 然后重启即可隐藏状态栏，要恢复正常只需将正常版覆盖并重启即可
通过查看应用程序的 UI 层次结构、属性值和引发的事件，开发人员和测试人员将能够验证辅助技术设备（如屏幕阅读器）是否能够以编程方式访问他们创建的 UI。 UI Spy 使用 UI 自动化库。UI 自动化是 Microsoft Windows...
untiy颜色选择器，像自带的颜色选择器一样选择颜色
54.UI元素状态伪类选择器下28:56 55.集团网站建设-全局头部制作57:36 56.集团网站建设-首页新闻列表52:17 57.集团网站建设-首页集团活动制作36:28 58.集团网站建设-首页右部份制作35:57 59.集团网站制作-底部版权...
Unity3d实现UI的日期/时间选择器功能
可配置的本地DOM UI元素挑选
应用程序体验需要对显示进行控制，移除各种系统修饰，例如状态栏和软件导航按钮。