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

开发者社区> 开发与运维> 正文

《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.3 E:read-only伪类选择器与E:read-write伪类选择器

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

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

q E: read-only伪类选择器用来指定当元素处于只读状态时的样式。

q E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。

在Firefox浏览器中,需要写成“-moz-read-only”或“-moz-read-write”的形式。

代码清单19-20为E: read-only选择器与E: read-write选择器结合使用的一个示例,在该示例中有一个姓名文本框控件和一个地址文本框控件。其中姓名文本框控件不是只读控件,使用E:read-write选择器定义样式;地址文本框控件是只读控件,使用E: read-only选择器定义样式。

image

这段代码的运行结果如图19-30所示。

image


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

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

代码清单19-21为一个E:checked伪类选择器的使用示例,在该示例中使用了几个checkbox复选框,复选框在非选取状态时边框默认为黑色,当复选框处于选取状态时通过E:checked伪类选择器让选取框的边框变为蓝色。


image

这段代码的运行结果如图19-31所示。

image

E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框控件的选取状态设定为非选取状态,E:default选择器中指定的样式仍然有效。

代码清单19-22为一个E:default选择器的使用示例,该示例中有几个复选框,第一个复选框被设定为默认打开时为选取状态,使用E:default选择器设定该复选框的边框为蓝色。


image
image

这段代码的运行结果如图19-32所示。

image

需要注意的是,即使用户将默认设定为选取状态的单选框或复选框修改为非选取状态,使用default选择器设定的样式依然有效,如图19-33所示。

E:indeterminate伪类选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定。到目前为止,只有Opera浏览器对这个选择器提供支持。

代码清单19-23为一个E:indeterminate选择器的使用示例,该示例中有一组单选框,其中任何一个单选框都没有被设定为默认选取状态,使用E:indeterminate选择器来设定页面打开时该组单选框的边框为蓝色。


image
image

这段代码所示示例在页面打开时的页面显示如图19-34所示。
用户只要选取其中任何一个单选框,使用E:indeterminate选择器指定的样式就被取消指定,如图19-35所示。

image

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章