|
1、选择器E:link、E:hover、E:active和E:focus <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选择器E:hover、E:active和E:focus</title> <style> a:link{color:greenyellow;} a:visited{color: gray;} input[type="text"]:hover{ background: green; } input[type="text"]:focus{ background: red; color: #fff; } input[type="text"]:active{ background: blue; } input[type="password"]:hover{ background: yellow; } </style> </head> <body> <h3>选择器E:hover、E:active和E:focus</h3> <form> 姓名：<input type="text" placeholder="请输入姓名"> <br/> <br/> 密码：<input type="password" placeholder="请输入密码"> </form> <a href="##">点击看看</a> </body> </html> 2、E:enabled伪类选择器与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选择器被用来指定当元素处于非只读状态时的样式。 <!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> 默认的选择项default <!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> indeterminate伪类选择器 <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 ptional伪类选择器 1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。 2) 、Eptional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:required 伪类选择器与Eptional伪类选择器</title> <style> input[type="text"]:required{ background: red; color: #ffffff; } input[type="text"] ptional{ background: green; color: #ffffff; } </style> </head> <body> <h1>E:required 伪类选择器与Eptional伪类选择器</h1><form> 姓名：<input type="text" placeholder="请输入姓名" required> <br/> <br/> 学校：<input type="text" placeholder="请输入学校"> </form> </body> </html> 8 、E:in-range伪类选择器与Eut-of-range伪类选择器 1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。 2) 、Eut-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:in-range 伪类选择器与Eut-of-range伪类选择器</title> <style> input[type="number"]:in-range{ color: #ffffff; background: green; } input[type="number"] ut-of-range{ background: red; color: #ffffff; } </style> </head> <body> <h1>E:in-range 伪类选择器与Eut-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0"> </body> </html>
| 
发表于 2021-12-2 09:39:37
收藏
