【前端开发系列】—— CSS3属性选择器总结

本文介绍HTML与CSS中各种状态伪类的应用方法，包括但不限于：default、indeterminate、invalid、valid、required、optional、in-range及out-of-range等。通过实际案例展示了如何使用这些伪类来改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　default：比如多选框，页面刷新时，默认选择触发

　　indeterminate：比如多选框，都没选时的样式

<html>
<head>
   <script>
       function radio_onchange()
       {
           
           var radio = document.getElementById("radio1");
           var text = document.getElementById("text1");
           console.log(text.disabled);
           if(radio.checked){
               console.log("checked");
               text.disabled = "";
           }else{
               console.log("unchecked");
               text.value = "";
               text.disabled = "disabled";
           }
       }
   </script>
   <style type="text/css">
       input[type="text"]:enabled{
           background-color:yellow;
       }
       input[type="text"]:disabled{
           background-color:purple;
       }
       input[type="text"]:hover{
           background-color:skyblue;
       }
       input[type="text"]:focus{
           background-color:red;
       }
       input[type="text"]:read-only{
           background-color:gray;
       }
       
       input[type="checkbox"]:checked{
           outline:2px solid blue;
       }
       
       input[type="checkbox"]:indeterminate{
           outline:2px solid red;
       }
   </style>
</head>
<body>
   <form>
       <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
       <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
       <input type=text id="text1" disabled />
       <p>
           姓名：<input type="text" name="name" /><br/>
           Email：<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" />
       </p>
       
       兴趣：<input type="checkbox">阅读</input>
       <input type="checkbox">电影</input>
       <input type="checkbox">游戏</input>
       <input type="checkbox">上网</input>
       <br/>
       
       
   </form>
</body>
</html>

　　invalid：不符合元素范围的

　　valid：符合元素范围校验的

<html>
<head>
   <style type="text/css">
       input[type="text"]:invalid{
           background-color:red;
       }
       input[type="text"]:valid{
           background-color:white;
       }
   </style>
</head>
<body>
   <form>
       <p>必须输入文字:<input type="text" required /></p>
   </form>
</body>
</html>

不合法时

合法时

　　required：支持这个属性，并且定义了required的

　　optional：支持requried属性，但是没有定义的

<html>
<head>
   <style type="text/css">
       input[type="text"]:required{
           border-color:red;
           border-width:3px;
       }
       input[type="text"]:optional{
           border-color:blue;
           border-width:3px;
       }
   </style>
</head>
<body>
   <form>
       姓名：<input type="text" required placeholder="必须输入" /><br/>
       年龄：<input type="text" />
   </form>
</body>
</html>

　　in-range：在范围内的

　　out-of-range：超出范围的

<html>
   <head>
       <style type="text/css">
           input[type="number"]:in-range{
               background-color:white;
           }
           input[type="number"]:out-of-range{
               background-color:red;
           }
       </style>
   </head>
   <body>
       test number 1-100<input type=number min=0 max=100>
   </body>
</html>

正常范围时

超出范围时

from:

http://www.cnblogs.com/xing901022/p/3971202.html