首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3之UI元素状态伪类选择器实例演示

Posted in HTML / CSS onAugust 11, 2017

所谓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选择器被用来指定当元素处于非只读状态时的样式。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="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>  
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>  
<form>  
    姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>  
    <br/>  
    <br/>  
    学校：<input type="text" placeholder="请输入学校">  
</form>  
</body>  
</html>

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>checked伪类选择器</title>  
    <style>  
        input[type="checkbox"]:checked{  
            outline: 2px solid green;  
        }  
    </style>  
</head>  
<body>  
<h1>checked伪类选择器</h1>  
<form>  
    房屋状态：  
    <input type="checkbox">水  
    <input type="checkbox">电  
    <input type="checkbox">天然气  
    <input type="checkbox">宽带  
</form>  
</body>  
</html>

 默认的选择项

<!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元素的样式。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="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>  
<h1>E:required伪类选择器与E:optional伪类选择器</h1>  
<form>  
    姓名：<input type="text" placeholder="请输入姓名" required>  
    <br/>  
    <br/>  
    学校：<input type="text" placeholder="请输入学校">  
</form>  
</body>  
</html>

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元素状态伪类选择器实例演示全部内容啦，希望大家继续支持三水点靠木~ 

 

css3之UI元素状态伪类选择器实例演示

- Author -

打不死滴小强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
CSS3贝塞尔曲线示例：创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5教程之html 5 本地数据库（Web Sql Database）
Apr 03 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
全面解析CSS Media媒体查询使用操作（推荐）
Aug 15 #HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 #HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 #HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 #HTML / CSS
纯CSS实现预加载动画效果
Sep 06 #HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 #HTML / CSS
vue-cli3.x(1) re模块(2) 监听(2) 事件调度器(1) watch(1) sched(1) vue-router-link(1) 项目打包(2) scss(1) TimePickerView(1)
You might like
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
一看就会的vuex实现登录验证（附案例）
2020/01/09 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python实现绘制树枝简单示例
2014/07/24 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
详解Python的单元测试
2015/04/28 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
Annoushka英国官网：英国奢侈珠宝品牌
2018/10/20 全球购物
澳大利亚Rockwear官网：女子瑜伽、健身和运动服
2021/01/26 全球购物
怎样写演讲稿
2014/01/04 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python