您现在的位置是:网站首页> 编程资料编程资料
css3之UI元素状态伪类选择器实例演示_css3_CSS_网页制作_
2023-11-05
159人已围观
简介 这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
所谓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选择器被用来指定元素获得光标聚焦点使用的样式,主要是在文本框控件获得聚焦点并进行文字输入时使用。
例如:
选择器E:hover、E:active和E:focus 选择器E:hover、E:active和E:focus
2、E:enabled伪类选择器与E:disabled伪类选择器
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
例如:
E:enabled伪类选择器与E:disabled伪类选择器 E:enabled伪类选择器与E:disabled伪类选择器
3、E:read-only伪类选择器与E:read-write伪类选择器
1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
read-only伪类选择器与E:read-write伪类选择器 read-only伪类选择器与E:read-write伪类选择器
4、伪类选择器E:checked、E:default和indeterminate
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选中状态时,整组单选框的样式。
checked伪类选择器 checked伪类选择器
默认的选择项
default伪类选择器 default伪类选择器
indeterminate伪类选择器
indeterminate伪类选择器 indeterminate伪类选择器
5、伪类选择器E::selection
1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
例如
伪类选择器E::selection 伪类选择器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伪类选择器 E:invalid伪类选择器与E:valid伪类选择器
7、E:required伪类选择器与E:optional伪类选择器提示:
本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- css3 box-shadow阴影(外阴影与外发光)图示讲解_css3_CSS_网页制作_
- Web前端绘制0.5像素的几种方法_css3_CSS_网页制作_
- css3实现一个div设置多张背景图片及background-image属性实例演示_css3_CSS_网页制作_
- 网页布局中CSS样式无效的十个重要原因详解_css3_CSS_网页制作_
- 刀塔传奇1.82版本灵魂石掉率改动_手机游戏_游戏攻略_
- 鬼武者魂九宫格路人武将物语出没处_手机游戏_游戏攻略_
- 雷霆战机卡bug技巧 雷霆战机卡bug刷紫装攻略_手机游戏_游戏攻略_
- 雷霆战机超级强化魔方如何购买?超级强化魔方购买教程_手机游戏_游戏攻略_
- 天天飞车车手微微满级属性介绍说明_手机游戏_游戏攻略_
- 雷霆战机卡箱子技巧 雷霆战机卡boss刷宝箱攻略_手机游戏_游戏攻略_
