zoukankan      html  css  js  c++  java
  • www.xttblog.com伪类选择器:E:checked、E:default和E:indeterminate

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

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

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

    代码清单19-21 E:checked伪类选择器的使用示例

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

    E:checked伪类选择器使用示例 

    input[type=”checkbox”]:checked { 
    outline:2px solid blue; 


    兴趣:阅读 旅游 看电影 上网

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

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

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

    代码清单19-22 E:default选择器的使用示例

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

    E:default选择器的使用示例 
    input[type=”checkbox”]:default { 
    outline:2px solid blue; 

    兴趣:阅读 旅游 看电影 上网

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

    我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

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

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

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

    我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

    代码清单19-23 E:indeterminate选择器的使用示例

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

    E:indeterminate选择器的使用示例 

    input[type=”radio”]:indeterminate{ 
    outline: solid 3px blue; 


    年龄: 男 女


    这段代码所示示例在页面打开时的页面显示如图19-34所示。

    用户只要选取其中任何一个单选框,使用E:indeterminate选择器指定的样式就被取消指定,如图19-35所示。

    我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

  • 相关阅读:
    ps中套索工具怎么使用的方法
    动态加载css方法实现和深入解析
    深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
    近期项目中用到的一些自己写的或者整理而成的前端效果干货(********************************)
    Vue.js自定义指令的用法与实例
    vue初探
    React Router基础使用
    javascript常用积累
    js动画(三)
    基于jQuery的ajax系列之用FormData实现页面无刷新上传
  • 原文地址:https://www.cnblogs.com/panda2/p/8732587.html
Copyright © 2011-2022 走看看