《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.5 E::selection伪类选择器-阿里云开发者社区

开发者社区> 华章计算机> 正文

《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.5 E::selection伪类选择器

简介: 本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第19章 ,第19.4.5节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
+关注继续查看

19.4.5 E::selection伪类选择器

E::selection伪类选择器用来指定当元素处于选中状态时的样式。
代码清单19-24为一个E::selection伪类选择器的使用示例,在该示例中分别给出了一个p元素,一个文本框控件以及一个表格。当p元素处于选中状态时,被选中文字变为红色;当文本框控件处于选中状态时,被选中文字变为灰色;当表格处于选中状态时,被选中文字变为绿色。


image
image

这段代码的运行结果如图19-36所示:


image

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

q E:invalid伪类选择器用来指定,当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

q E:valid伪类选择器用来指定,当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素,当元素中没有被填入内容时元素背景色为红色,当元素中填入内容后元素背景色变为白色。


image

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

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

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

代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框,并且对用于输入姓名的文本框指定了required属性,不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色,宽度为3px,通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色,宽度为1px。


image
image

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

q E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式。

q E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),但实际输入值在该范围之外时使用的样式。

代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件(type属性值为number的input元素),通过min属性值与max属性值限定元素内的有效输入数值为从1到100,通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色,通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。


image
image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
艾伟:[一步一步MVC]第一回:使用ActionSelector控制Action的选择
本系列文章导航 [一步一步MVC]第一回:使用ActionSelector控制Action的选择 [一步一步MVC]第二回:还是ActionFilter,实现对业务逻辑的统一Authorize处理 [一步一步MVC]第三回:MVC范例大观园 [一步一步MVC]第四回:漫谈ActionLink,有时“...
691 0
《VMware Virtual SAN权威指南(原书第2版)》一3.6 网络I/O控制配置示例
本节书摘来自华章出版社《VMware Virtual SAN权威指南(原书第2版)》一 书中的第3章,第3.6节,作者:[美] 科马克·霍根,邓肯·埃平,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1037 0
《VMware Virtual SAN权威指南(原书第2版)》一3.7 设计考量:分布式交换机和网络I/O控制
本节书摘来自华章出版社《VMware Virtual SAN权威指南(原书第2版)》一 书中的第3章,第3.7节,作者:[美] 科马克·霍根,邓肯·埃平,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1186 0
FancySelect – 更好用的 jQuery 下拉选择框插件
  FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以了。
827 0
10059
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载