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

导读 UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态.....

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当元素内容不能通过伪元素内容不能通过时HTML通过使用的元素,如requirde当属性指定的检查或元素内容不符合元素规定的格式时。
2)、E:valid当元素内容可以通过伪类选择器指定时HTML通过使用的元素,如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中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-06 00:00:32

猜你喜欢

最新文章