UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验。
表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等。
在使用UI状态伪类选择器时，可以结合属性选择器，来限定特定元素的类型，甚至将UI状态伪类结合在一起使用，来创造更丰富的样式。如果不限定元素的类型，则对任何元素均有效。
E:focused
E:focused伪类选择器选择获得的元素。如，以下规则可以为任何获得焦点的 input 元素添加 1px 的橙色边框，而不管它的类型：
input:focus {border: 1px solid #f60;}
运行结果如图 2‑23 所示：
图2-23 获得焦点状态
E:checked
E:checked伪类选择器选择表单中被选中的 radio 或 checkbox 元素。假设在注册用户的页面上，有一个复选框和同意注册的文本：
<input type="checkbox" value="1" /><label> 我已经阅读并同意网站注册条款</label>
以下规则为选中的单选按钮或复选框紧邻的 label 元素添加样式：
input:checked + label {color: green;}
当用户选中复选框后，紧邻复选框的 label 元素中的文本将变成绿色。运行结果如图 2‑24 所示：
图2-24 复选框选中状态
E:enabled/E:disenabled
E:enabled伪类选择器选择处于可用状态的元素，E:disenabled伪类选择器选择处于不可用状态的元素。假设页面上有两个元素，一个可用，一个不可用：
<label> enabled: </label><input type="text" /><label>disabled: </label><input type="text" disabled />
就可以针对元素的可用、不可用状态，应用不同的样式。如，对不可用的元素，可以禁用鼠标，并设置灰色背景和边框：
input[type="text"] {width: 200px;height: 20px;background: #fff;border: 1px solid #cbcbcb;}input[type="text"]:disabled {cursor: not-allowed;background: #eee;border-color: #ddd;}
运行结果如图 2‑25 所示：
图2-25 可用、不可用状态
如果一个表单元素经常在可用和不可用状态之间进行切换，通常将这两个选择器结合使用，来改变元素的样式，增加表单的易用性。
E:valid/E:invalid
E:valid 伪类选择器选择输入数据有效的元素，E:invalid 伪类选择器选择输入数据无效的元素。如，对于获得焦点的 email 输入框，就可以根据用户的输入是否为有效的邮箱地址，来应用不同的样式：
<label>E-Mail: </label><input type="email" name="email" />
此时，就可以根据用户的输入，来应用不同的样式。如果输入有效的邮箱地址，文本框的边框颜色为绿色，如果输入无效的邮箱地址，文本框的边框颜色为红色：
input[type="email"]:focus:valid {border: 1px solid green;}input[type="email"]:focus:invalid {border: 1px solid red;}
这样的话，在页面初始加载时，由于用户还没有进行输入，邮箱邮箱地址一定是非法值，文本框就会显示红色警示边框。运行结果如图 2‑26 所示：
图2-26 输入非法的邮箱地址
随着用户不断输入，当邮箱地址合法的时候，文本框就会由红色边框，自动变成安全的绿色边框。运行结果如图 2‑27 所示：
图2-27 输入合法的邮箱地址
E:in-range/E:out-of-range
E:in-range伪类选择器选择输入数据在有效范围的元素，E:out-of-range伪类选择器选择输入数据超出有效范围的元素。如，对于 input 类型为 number 的文本输入框，其输入的值必须在 min 和 max 的范围内。
<label>请输入数字（0~10）: </label><input type="number" min=0 max=10 />
此时，就可以根据用户的输入，来应用不同的样式。如果输入的数值未超出范围，文本框的边框颜色为绿色，一旦输入的数值超出范围，文本框的边框颜色就变为红色：
input[type="number"]:focus:in-range {border: 1px solid green;}input[type="number"]:focus:out-of-range {border: 1px solid red;}
这样的话，在用户输入数值的过程中，当输入的数值在有效范围内，文本框就是安全的绿色边框。运行结果如图 2‑28 所示：
图2-28 输入合法的数值
随着用户的不断输入，当输入的数值超出有效范围时，文本框就会由安全的绿色边框，自动变成红色警示边框。运行结果如图 2‑29 所示：
图2-29 输入非法的数值
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
