1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 关于css3的UI元素状态伪类选择器的分析

关于css3的UI元素状态伪类选择器的分析

时间:2020-02-05 06:38:31

相关推荐

关于css3的UI元素状态伪类选择器的分析

web前端|css教程

UI元素状态伪类选择器,伪类选择器

web前端-css教程所谓UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用!

魂之力量源码,ubuntu清理开机项目,tomcat8.0绿色版,用lua做爬虫,php上传数据库失败,seo技术 渗透lzw

浏览器兼容性:

自助建站 带源码,如何设置ubuntu联网,tomcat导致服务器慢,ai爬虫是什么,php 调微信添加门店,seo思维训练lzw

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

下面就其使用做详细的说明;

视频资源采集网站源码,ubuntu 触控手势,python爬虫进阶书籍,aliddns php,猫网seolzw

1、选择器E:hover、E:active和E:focus

1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式

使用方法:

:hover{

CSS样式

}

我们可以在“”中添加元素的type属性。

例:

input[type=”text”]:hover{

CSS样式

}

2)、E:active选择器被用来指定元素被激活时使用的样式

3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式,主要是在文本框控件获得聚焦点并进行文字输入时使用。

例如:

选择器E:hover、E:active和E:focusinput[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;}

选择器E:hover、E:active和E:focus

姓名:

密码:

2、E:enabled伪类选择器与E:disabled伪类选择器

1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。

2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

例如:

E:enabled伪类选择器与E:disabled伪类选择器input[type="text"]:enabled{ background: green; color: #ffffff;}input[type="text"]:disabled{ background: #727272;}

E:enabled伪类选择器与E:disabled伪类选择器

姓名:

学校:

3、E:read-only伪类选择器与E:read-write伪类选择器

1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。

2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。

read-only伪类选择器与E:read-write伪类选择器input[type="text"]:read-only{ background: #000; color: green;}input[type="text"]:read-write{ color: #ff6600;}

read-only伪类选择器与E:read-write伪类选择器

姓名:

学校:

4、伪类选择器E:checked、E:default和indeterminate

1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。

2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。

3)、E:indeterminate选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选中状态时,整组单选框的样式。

checked伪类选择器input[type="checkbox"]:checked{ outline: 2px solid green;}

checked伪类选择器

房屋状态:水电天然气宽带

默认的选择项

default伪类选择器input[type="checkbox"]:default{ outline: 2px solid green;}

default伪类选择器

房屋状态:水电天然气宽带

indeterminate伪类选择器

indeterminate伪类选择器input[type="radio"]:indeterminate{ outline: 2px solid green;}

indeterminate伪类选择器

性别:男女

5、伪类选择器E::selection

1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。

例如

伪类选择器E::selection::selection{ background: green; color: #ffffff;}input[type="text"]::selection{ background: #ff6600; color: #ffffff;}

伪类选择器E::selection

今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!

6、E:invalid伪类选择器与E:valid伪类选择器

1)、E:invalid伪类选择器用来指定,当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。

2)、E:valid伪类选择器用来指定,当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。

例如

E:invalid伪类选择器与E:valid伪类选择器input[type="email"]:invalid{ color: red;}input[type="email"]:valid{ color: green;}

E:invalid伪类选择器与E:valid伪类选择器

7、E:required伪类选择器与E:optional伪类选择器

1)、E:required伪类选择器用来指定允许使用required属性,而且已经指定了required属性的input元素、select元素以及textarea元素的样式。

2)、E:optional伪类选择器用来指定允许使用required属性,而且未指定了required属性的input元素、select元素以及textarea元素的样式。

E:required伪类选择器与E:optional伪类选择器input[type="text"]:required{background: red;color: #ffffff;}input[type="text"]:optional{ background: green; color: #ffffff;}

E:required伪类选择器与E:optional伪类选择器

姓名:

学校:

8、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,且实际的输入值在该范围之内时的样式。

2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,但实际输入值在超过时使用的样式。

例如

E:in-range伪类选择器与E:out-of-range伪类选择器input[type="number"]:in-range{ color: #ffffff; background: green; }input[type="number"]:out-of-range{ background: red; color: #ffffff;}

E:in-range伪类选择器与E:out-of-range伪类选择器

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。