<!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元素状态伪类选择器，这些选择器允许我们在不同的用户交互状态下改变元素的样式，从而使Web界面更加动态和用户友好。以下详细介绍和实例演示了几个常用的UI元素状态伪类选择器。 1. E:hover选择器 ...
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
二、UI伪类选择器：这些选择器针对用户界面元素的不同状态。 - :enabled 选择器选择那些启用状态的元素，例如表单输入。 - :disabled 选择器选择那些禁用状态的元素。 - :checked 选择器选择那些被勾选的单选按钮或...
这些UI元素可能包括按钮、滑块、仪表盘、指示器、开关等交互组件，以及背景、边框、图标和其他装饰元素，它们通常采用冷色调、金属质感和几何形状，营造出高科技的氛围。 在Unity中集成这些科幻UI元素，首先需要...
- UI元素状态伪类选择器：如:target, :enabled, :disabled, :checked。 这些CSS3选择器提高了开发者对页面布局和样式的控制能力，使得样式的应用更加精确和多样化。通过合理地使用CSS选择器，开发者可以编写出更加...
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例，分享给大家，具体如下： Mint UI 使用文档：https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍：...
"1.2 切换系统UI元素"这个主题聚焦于如何自定义和控制应用的界面显示，以达到更沉浸式的交互效果。这一节主要涵盖以下几个关键知识点： 1. **夜间模式**：夜间模式是一种用户友好的功能，它将应用界面切换到暗色调...
《jQuery UI带时间的日期选择器代码解析与应用》 在网页开发中，日期和时间的选择功能是一项常见的需求。jQuery UI库提供了一种强大的解决方案，它包含了一个名为"Datepicker"的组件，不仅可以用于选择日期，还可以...
CSS3参考手册(css3语法使用查询手册)CHM版，可快速索引和搜索CSS3各种属性值以及具体的用法，说详细介绍有CSS3选择器的各方面知识，这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
systemui，安卓的系统状态栏。联想a65,a60版
**三、链接伪类选择器** 链接伪类选择器用于链接的不同状态： 1. `:link` - 未被访问过的链接。 2. `:visited` - 已被访问过的链接。 3. `:hover` - 鼠标悬停时的链接。 4. `:active` - 被激活的链接（例如点击时）...
日期选择器在IT行业中是常见的用户界面元素，主要用于让用户方便地选取特定的日期。这个功能在许多应用程序中都至关重要，例如日历应用、预订系统、数据分析工具等。在这个场景中，用户点击一个空间，会弹出一个...
AmazeUI是一款轻量级、跨屏响应的前端框架，专为移动优先的网页开发设计...通过理解并熟练运用 AmazeUI 提供的 CSS 类和 JavaScript 插件，开发者能够轻松地创建出在滚动页面时依然保持可见的元素，从而提升用户体验。
【木质UI元素主题包】是一个专门针对用户界面设计的资源集合，主要特点是采用了木质纹理作为设计元素，为设计师提供了一套完整的、具有自然质感的UI组件。这些元素通常包括按钮、导航条、图标、滑块、输入框等各种...
在本资源中，“易语言UI设计源码 选择夹类动效和循环动效”是关于易语言用户界面（UI）设计的一个项目，其中包含了选择夹类动效和循环动效的实现代码。 UI设计是软件开发中的关键环节，直接影响到用户的交互体验。...
CSS选择器的权重分为四类：ID选择器（#）、类选择器（.）、标签选择器（元素名）以及通用选择器（*）、伪类和属性选择器等。每类选择器对应不同的权重： 1. ID选择器：100分 2. 类选择器、属性选择器、伪类：10分 3...
Unity是一款强大的跨平台游戏开发引擎，它被广泛用于创建2D和3D的...在学习和使用这个插件时，理解Unity UI系统的运作机制，掌握C#脚本处理UI事件，以及如何自定义和集成第三方组件，都是开发者需要掌握的重要技能。
使用冒号（:）来标识伪类，而在CSS3中使用双冒号（::）来标识新增的伪元素，这两者有所区别。例如，链接伪类的语法通常是：a:link、a:visited、a:hover和a:active。 在用户与链接进行交互时，如将鼠标悬停在链接上...