• 技术文章 >web前端 >css教程

    一文详解css中的UI状态伪类选择器

    青灯夜游青灯夜游2022-08-03 12:09:49原创153

    UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验。

    UI状态伪类选择器的特征:指定的样式只有在某种状态下才起作用

    表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。

    UI状态伪类选择器
    选择器功能描述版本
    E:focused选择表单中获得焦点的元素3
    E:checked选择表单中被选中的radio或者checkbox元素3
    E:enabled选择表单中可用的元素3
    E:disabled选择表单中不可用(即被禁用)的元素3
    E:valid选择表单中填写的内容符合要求的元素3
    E:invalid选择表单中填写的内容不符合要求的元素,如非法的URL或E-Mail,或与 pattern 属性给出的模式不匹配3
    E:in-range选择表单中输入的数字在有效范围内的元素3
    E:out-of-range选择表单中输入的数字超出有效范围的元素3
    E:required选择表单中必填的元素3
    E:optional选择表单中允许使用required属性,且未指定为required的元素3
    E:read-only选择表单中状态为只读的元素3
    E:read-write选择表单中状态为非只读的元素3
    E:default选择表单中默认处于选取状态的单选框或复选框,即使用户将该单选框或复选框控件的选取状态设定为非选取状态,E:default选择器中指定的样式仍然有效3
    E:indeterminate选择器表单中一组单选框中没有任何一个单选框被选取时整组单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定3

    1、E:hover选择器

    用来指定当鼠标指针移动到元素上时元素所使用的样式

    使用方法:

    <元素>:hover{ 
    CSS样式 
    }

    我们可以在“<元素>”中添加元素的type属性。

    例:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            a {
                text-decoration: none;
            }
            a:link {
                font-size: 18px;
                border: 1px solid black;
                padding: 5px;
                margin-left: 10px;
                background: #ccc;
                color: black;
            }
            a:visited {
                background: #FFFF99;
                border: 1px solid red;
                color: red;
            }
            a:hover {
                background: #9c6ae1;
                border: 1px solid black;
                color: black;
            }
        </style>
    </head>
    <body>
        <a href=''>这是一个链接</a>
        <a href=''>这是另一个链接</a>
    </body>
    </html>

    运行结果如下图所示:

    1.gif

    2、E:active选择器

    :active:定义点击链接时的样式。

    通过:active伪类选择器可以定义点击链接时的样式,示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            a {
                text-decoration: none;
            }
            a:link {
                font-size: 18px;
                border: 1px solid black;
                padding: 5px;
                margin-left: 10px;
                background: #ccc;
                color: black;
            }
            a:visited {
                background: #FFFF99;
                border: 1px solid red;
                color: red;
            }
            a:hover {
                background: #9c6ae1;
                border: 1px solid black;
                color: black;
            }
            a:active {
                background: #000;
                border: 1px solid black;
                color: white;
            }
        </style>
    </head>
    <body>
        <a href=''>这是一个链接</a>
        <a href=''>这是另一个链接</a>
    </body>
    </html>

    运行结果如下图所示:

    2.gif

    3、E:link选择器

    :link:定义普通或未访问链接的样式;

    通过:link伪类选择器可以为普通或未访问的链接设置样式,示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            a {
                text-decoration: none;
            }
            a:link {
                font-size: 18px;
                border: 1px solid black;
                padding: 5px;
                margin-left: 10px;
                background: #ccc;
                color: black;
            }
        </style>
    </head>
    <body>
        <a href=''>这是一个链接</a>
        <a href=''>这是另一个链接</a>
    </body>
    </html>

    运行结果如下图所示:

    3.gif

    4、E:visited选择器

    :visited:定义已经访问过链接的样式;

    通过:visited伪类选择器可以为已经访问过的链接设置样式,示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            a {
                text-decoration: none;
            }
            a:link {
                font-size: 18px;
                border: 1px solid black;
                padding: 5px;
                margin-left: 10px;
                background: #ccc;
                color: black;
            }
            a:visited {
                background: #FFFF99;
                border: 1px soild red;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href=''>这是一个链接</a>
        <a href=''>这是另一个链接</a>
    </body>
    </html>

    运行结果如下图所示:

    4.gif

    5、E:focus选择器

    :focus:用来指定元素获得光标聚焦点使用的样式

    示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    5.gif

    6、E:enabled伪类选择器与E:disabled伪类选择器

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

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    6.png

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    7.gif

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    8.gif

    默认的选择项

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    9.gif

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    10.gif

    9、伪类选择器E::selection

    E:selection伪类选择器用来指定当元素处于选中状态时的样式。

    <!DOCTYPE html>
    <html>
    <head>
    <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>
    <input type="text" placeholder="文本">
    </body>
    </html>

    11.gif

    10、E:invalid伪类选择器与E:valid伪类选择器

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

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    11、E:required伪类选择器与E:optional伪类选择器

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

    <!DOCTYPE html>
    <html>
    	<head>
    		<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>

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <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>

    12.gif

    各UI元素状态伪类选择器受浏览器的支持情况

    选择器FirefoxSafariOperaIE8Chrome
    E:hover
    E:activex
    E:focus
    E:enablex
    E:disablex
    E:read-onlyxxx
    E:read-writexxx
    E:checkedx
    E:defaultxxxx
    E:indeterminatex
    E:selectionx

    (学习视频分享:web前端入门

    以上就是一文详解css中的UI状态伪类选择器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:介绍下CSS盒子模型以及box-sizing属性 下一篇:CSS伸缩盒布局(总结分享)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 聊聊CSS3中的4个逻辑选择器(快速入手)• 详解CSS中的基本选择器,并聊聊选择器优先级• CSS中什么是层级选择器?怎么用?• css伪选择器学习之伪元素选择器解析• css伪选择器学习之伪类选择器解析
    1/1

    PHP中文网