精华内容
下载资源
问答
  • 主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2262510
  • UI元素状态伪类选择器对于不同的浏览器有着不同的兼容性。详细见下图: 1、选择器E:hover、E:active和E:focus 1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式 使用方法: <元素>:...

    UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用!
    UI元素状态伪类选择器对于不同的浏览器有着不同的兼容性。详细见下图:
    兼容性
    1、选择器E:hover、E:active和E:focus
    1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
    使用方法: <元素>:hover{ CSS样式 }
    我们可以在“<元素>”中添加元素的type属性。
    例:input[type=“text”]:hover{ CSS样式}
    2)、E:active选择器被用来指定元素被激活时使用的样式
    3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式,主要是在文本框控件获得聚焦点并进行文字输入时使用

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>选择器E:hover、E:active和E:focus</title>
        <style>
            input[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;
            }
        </style>
    </head>
    <body>
    <h1>选择器E:hover、E:active和E:focus</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名">
        <br/>
        <br/>
        密码:<input type="password" placeholder="请输入密码">
    </form>
    </body>
    </html>
    

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

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
        <style>
            input[type="text"]:enabled{
                background: green;
                color: #ffffff;
            }
            input[type="text"]:disabled{
                background: #727272;
            }
        </style>
    </head>
    <body>
    <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名" disabled>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>
    

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

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>read-only伪类选择器与E:read-write伪类选择器</title>
        <style>
            input[type="text"]:read-only{
                background: #000;
                color: green;
            }
            input[type="text"]:read-write{
                color: #ff6600;
            }
        </style>
    </head>
    <body>
    <h1>read-only伪类选择器与E:read-write伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名" value="winson" readonly>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>
    

    4、伪类选择器E:checked、E:default和indeterminate
    1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
    2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
    3)、E:indeterminate选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选中状态时,整组单选框的样式。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>checked伪类选择器</title>
        <style>
            input[type="checkbox"]:checked{
                outline: 2px solid green;
            }
        </style>
    </head>
    <body>
    <h1>checked伪类选择器</h1>
    <form>
        房屋状态:
        <input type="checkbox">水
        <input type="checkbox">电
        <input type="checkbox">天然气
        <input type="checkbox">宽带
    </form>
    </body>
    </html>
    

    5、伪类选择器E::selection
    1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
    6、E:invalid伪类选择器与E:valid伪类选择器
    1)、E:invalid伪类选择器用来指定,当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
    2)、E:valid伪类选择器用来指定,当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
    7、E:required伪类选择器与E:optional伪类选择器
    1)、E:required伪类选择器用来指定允许使用required属性,而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
    2)、E:optional伪类选择器用来指定允许使用required属性,而且未指定了required属性的input元素、select元素以及textarea元素的样式。
    8、E:in-range伪类选择器与E:out-of-range伪类选择器
    1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,且实际的输入值在该范围之内时的样式。
    2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内,但实际输入值在超过时使用的样式。

    展开全文
  • css3之UI元素状态伪类选择器

    千次阅读 2016-09-21 19:48:27
    所谓UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用! 浏览器兼容性: E:hover 支持firefox、safari、Opera、ie8、chrome  E:active 支持firefox、safari、Opera、chrome ...

    所谓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选择器被用来指定元素获得光标聚焦点使用的样式,主要是在文本框控件获得聚焦点并进行文字输入时使用。

    例如:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>选择器E:hover、E:active和E:focus</title>
        <style>
            input[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;
            }
        </style>
    </head>
    <body>
    <h1>选择器E:hover、E:active和E:focus</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名">
        <br/>
        <br/>
        密码:<input type="password" placeholder="请输入密码">
    </form>
    </body>
    </html>
    2、E:enabled伪类选择器与E:disabled伪类选择器
     1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
     2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。

    例如:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
        <style>
            input[type="text"]:enabled{
                background: green;
                color: #ffffff;
            }
            input[type="text"]:disabled{
                background: #727272;
            }
        </style>
    </head>
    <body>
    <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名" disabled>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>
    3、E:read-only伪类选择器与E:read-write伪类选择器
     1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
     2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>read-only伪类选择器与E:read-write伪类选择器</title>
        <style>
            input[type="text"]:read-only{
                background: #000;
                color: green;
            }
            input[type="text"]:read-write{
                color: #ff6600;
            }
        </style>
    </head>
    <body>
    <h1>read-only伪类选择器与E:read-write伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名" value="winson" readonly>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>
    4、伪类选择器E:checked、E:default和indeterminate
     1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
     2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
     3)、E:indeterminate选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选中状态时,整组单选框的样式。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>checked伪类选择器</title>
        <style>
            input[type="checkbox"]:checked{
                outline: 2px solid green;
            }
        </style>
    </head>
    <body>
    <h1>checked伪类选择器</h1>
    <form>
        房屋状态:
        <input type="checkbox">水
        <input type="checkbox">电
        <input type="checkbox">天然气
        <input type="checkbox">宽带
    </form>
    </body>
    </html>
    默认的选择项

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>default伪类选择器</title>
        <style>
            input[type="checkbox"]:default{
                outline: 2px solid green;
            }
        </style>
    </head>
    <body>
    <h1>default伪类选择器</h1>
    <form>
        房屋状态:
        <input type="checkbox" checked>水
        <input type="checkbox">电
        <input type="checkbox">天然气
        <input type="checkbox">宽带
    </form>
    </body>
    </html>
    <h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>indeterminate伪类选择器</title>
        <style>
            input[type="radio"]:indeterminate{
                outline: 2px solid green;
            }
        </style>
    </head>
    <body>
    <h1>indeterminate伪类选择器</h1>
    <form>
        性别:
        <input type="radio">男
        <input type="radio">女
    </form>
    </body>
    </html>
    5、伪类选择器E::selection
     1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。

    例如

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>伪类选择器E::selection</title>
        <style>
            ::selection{
                background: green;
                color: #ffffff;
            }
            input[type="text"]::selection{
                background: #ff6600;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
    <h1>伪类选择器E::selection</h1>
    <p>今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!今天,开发搜索框,出现了bug,现在没有找到原因!</p>
    <input type="text" placeholder="文本">
    </body>
    </html>

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

    例如

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:invalid伪类选择器与E:valid伪类选择器</title>
        <style>
            input[type="email"]:invalid{
                color: red;
            }
            input[type="email"]:valid{
                color: green;
            }
        </style>
    </head>
    <body>
    <h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
    <form>
        <input type="email" placeholder="请输入邮箱">
    </form>
    </body>
    </html>

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

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:required伪类选择器与E:optional伪类选择器</title>
        <style>
        input[type="text"]:required{
            background: red;
            color: #ffffff;
        }
            input[type="text"]:optional{
                background: green;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
    <h1>E:required伪类选择器与E:optional伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名" required>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>

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

    例如

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
        <style>
            input[type="number"]:in-range{
                color: #ffffff;
                background: green;
    
            }
            input[type="number"]:out-of-range{
                background: red;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
    <h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
    <input type="number" min="0" max="100" value="0">
    </body>
    </html>




    展开全文
  • css—UI元素状态伪类选择器上 1.选择器E:hover,E:active和E:focus 1)E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式; <元素>:hover{ css样式 } 在“<元素>”中添加元素的type属性...

    css—UI元素状态伪类选择器上

    1.选择器E:hover,E:active和E:focus

    1)E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式;
    <元素>:hover{
    css样式
    }
    在“<元素>”中添加元素的type属性。
    例:input[type=“text”]:hover{
    css样式
    }

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

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

    4)小案例:
    结合上诉实现以下效果,当鼠标移动上去是文本框变成绿色,当鼠标点击时(点击并未弹起)文本框处于蓝色,当处于可输入状态时文本框变成橙色

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>选择器E:hover,E:active和E:focus</title>
        <style>
            input[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;
            }
        </style>
        </head>
    <body>
    <h1>选择器E:hover,E:active和E:focus</h1>
    <form>
     姓名:<input type="text" placeholder="请输入姓名">
       <br/>
        <br/>
        密码:<input type="password" placeholder="请输入密码">
    </form>
    </body>
    </html>
    

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

    1).E:enabled选择器被用来指定当元素处于可用状态时的样式;
    2)E:disabled选择器被用来指定当元素处于不可用状态时的样式;
    3)小案例:
    结合上诉实现以下效果,文本框可用时背景颜色绿色,不可用时背景变成浅灰色

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
        <style>
            input[type="text"]:enabled{
                background: green;
                color:#ffffff;
            }
             input[type="text"]:disabled{
                background: #727272;
            }
            </style>
    </head>
    <body>
    <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
    <form>
     姓名:<input type="text" placeholder="请输入姓名" disabled>
        <br/>
        <br/>
        学校:<input type="text" placeholder="请输入学校">
    </form>
    </body>
    </html>
    
    
    

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

    1)read-only选择器被用来指定当元素处于只读状态时的样式;
    2)read-write选择器被用来指定当元素处于非只读状态时的样式;
    3)小案例
    结合上诉实现以下效果,文本框可用时输入文字变成红色,不可用时,设置里面的背景为黑色,文字为绿色。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>.E:read-only伪类选择器与E:read-write伪类选择器</title>
        <style>
            input[type="text"]:read-only{
                background:#000 ;
                color:green;
            }
             input[type="text"]:read-write{
                color:#ff6600;
            }
        </style>
    </head>
    <body>
    <h1>.E:read-only伪类选择器与E:read-write伪类选择器</h1>
    <form>
        姓名:<input type="text" placeholder="请输入姓名"  value ="朱朝彬" read-only>
        <br/>
        <br/>
         学校:<input type="text" placeholder="请输入学校" read-write>
    </form>
    </body>
    </html>
    

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

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

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

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

    4)小案例:

    A:模拟一个发布房产信息的选框控件,当选择以后,会给他一个2px实线绿色的边框效果;

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>checked伪类选择器</title>
        <style>
            input[type="checkbox"]:checked{
                outline:2px solid green;
            }
        </style>
        </head>
    <body>
    <h1>checked伪类选择器</h1>
    <form>
        房屋状态:
        <input type="checkbox "><input type="checkbox "><input type="checkbox "><input type="checkbox ">光纤
    </form>
    </body>
    </html>
    
    

    B:实线一个默认选择中的控件,默认给他一个2px实线绿色的边框!

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>default伪类选择器</title>
        <style>
            input[type="checkbox"]:default{
                outline:2px solid green;
            }
        </style>
        </head>
    <body>
    <h1>checked伪类选择器</h1>
    <form>
        房屋状态:
        <input type="checkbox" checked><input type="checkbox"><input type="checkbox"><input type="checkbox">光纤
    </form>
    </body>
    </html>
    

    C:实现一个在默认打开都没有选中时,给他们一个2px实线绿色的边框!

    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>indeterminate伪类选择器</title>
        <style>
            input[type="radio"]:indeterminate{
                outline:2px solid green;
            }
        </style>
        </head>
    <body>
    <h1>indeterminate伪类选择器</h1>
    <form>
       性别:
        <input type="radio"><input type="radio"></form>
    </body>
    </html>
    
    
    展开全文
  • UI元素状态伪类选择器

    千次阅读 2015-06-11 11:03:32
    E:hover 用于指定当鼠标指针移动到元素上面时元素所使用的样式; E:action 用于指定元素被激活(鼠标在元素上按下还没有...E:enable 设置该元素处于可用状态的样式; E:disabled 设置该元素处于不可用状态时的样式; E
    E:hover   用于指定当鼠标指针移动到元素上面时元素所使用的样式;
    
    E:action  用于指定元素被激活(鼠标在元素上按下还没有松开)时所使用的样式;
    E:focus   用于指定元素获得光标焦点时所使用的样式,主要是在文本框空间获得焦点并进行文字输入时使用的样式;
    E:enable  设置该元素处于可用状态的样式;
    E:disabled  设置该元素处于不可用状态时的样式;
    E:read-only  设置元素处于只读状态时的样式;
    E:read-write  设置元素处于非只读状态时的样式;
    E:checked  指定表单中的radio单选按钮或者checkbox复选框处于选取状态时的样式;
    E:default  指定页面打开时默认处于选取状态的单选按钮或者复选框样式;(即使用户将默认状态设置为选取状态的单选按钮或者复选框改为禁用状态,使用该选择器设置的样式同样有效)

    E:indeterminate  指定当页面打开时,如果一组单选按钮中任何一个选项都没有被设定为选取状态时,整组单选按钮的样式;如果用户选取了其中任何一个单选按钮,则该样式将被停止使用。

    E::selection  设置元素被选中状态的样式。 

    简单看一下用法:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #submit:active
            {
                outline:none;
                box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
                ...
            }
            #submit::-moz-focus-inner
            {
                border:none;
            }
        </style>
    </head>
    <body>
        <form id="login">
           <fieldset id="inputs">
               <input id="username" type="text" placeholder="名称" autofocus required />
               <input id="password" type="password" placeholder="密码" required />
           </fieldset>    
           <fieldset id="actions">
               <input type="submit" id="submit" value="登录" />
               <a href="">忘记密码?</a>
               <a href="">注册</a>
           </fieldset>
            <a href="http://blog.csdn.net/lindonglian" id="back">返回</a>
        </form>
    </body>
    </html>

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            :checked
            {
                outline:2px solid #ee0000;
            }
        </style>
    </head>
    <body>
        <div id="table">
            <div id="eve1">
                <form>
                    服务态度:
                    <input type="checkbox">
                    非常好
                    </input>
                    <input type="checkbox">
                    良好
                    </input>
                    <input type="checkbox">
                    一般
                    </input>
                </form>
            </div>
        </div>
    </body>
    </html>

    展开全文
  • css3 - UI元素状态伪类选择器

    千次阅读 2017-04-27 21:58:40
    共11种分别为:E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selection各UI元素状态伪类选择器受浏览器的支持情况 选择器 Firefox ...
  • UI元素状态伪类选择器UI元素状态伪类选择器 UI元素状态伪类选择器 有如下伪类选择器 ➢Selector:link: 匹配Selector选择器且未被访问前的元素(通常只能是超链接)。 ➢Selector:visited: 匹配Selector选择器且已被...
  • UI元素状态伪类选择器也是CSS3选择器模块组中的一部分,此类选择器主要运用于form表单元素上,用来提高网页的人机交互、操作逻辑以及页面的整体美观。 1、:enabled和:disabled 要正常使用“:disabled”选择器,...
  • :link 链接被访问之前样式 :visited 链接被访问之后样式 :hover 链接在鼠标悬停时样式 :active 链接在鼠标被按下后样式 注:尽量按以上顺序书写 &lt;!DOCTYPE html&gt; &......
  • CSS—UI元素状态伪类选择器下 5.伪类选择器E::selection 1)E::selection伪类选择器用来指定当元素处于选中状态时的样式。 2)小案例: 选择网页中p段落中的文字和文本框中的文字,改变他的背景颜色为绿色! <!...
  • E:selection 元素被选中时的样式 <!... <... <head lang="en">...伪类选择器E::selection</title> <style> ::selection{ /*运用到全页面中,注意是两个冒号*/ background: green;
  • 2.7 UI元素状态伪类选择器 UI元素状态伪类选择器也是CSS3选择器模块组中的一部分,主要用于form表单元素上,以提高网页的人机交互、操作逻辑以及页面的整体美观,使表单页面更具个性与品位,而且使用户操作页面表单...
  • 16.4 UI元素状态伪类选择器 在CSS 3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器。 这些选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。 在CSS ...
  • 1、E:hover, E:active, E:focus E:hover 鼠标移动在上面 E:active 被点击且未弹...E:focus 点击后,可输入文本状态 实际操作中,要先写E:focus,再写E:active,不然无法实现E:active的代码 <!... <...选择器E:hover、E:
  • UI元素状态伪类选择器主要用于表单元素上,提高网页的人机交互、操作逻辑以及页面的整体美观,其语法如下: 选择器 类型 功能描述 E:checked 选中状态伪类选择器 匹配选中的复选按钮或单选按钮表单...
  • 1.E:hover选择器 1)概念:被用来指定当鼠标指针移动到元素上时元素所使用的样式。 2)使用方法: <元素>:hover{ CSS样式 } 2.E:active选择器 1)概念:被用来指定元素被激活时使用的样式。 2)使用方法: <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,848
精华内容 3,139
关键字:

ui元素状态伪类选择器