使用UI伪类选择器可以根据元素的状态匹配元素。
1.选择启用或禁用元素
有些元素有启用或者禁用状态，一般用来收集用户输入。
- :enabled和:disabled选择器不会匹配没有禁用状态的元素
<style type="text/css"> :enabled { border: thin black solid; padding: 4px; } </style> …… <body> <textarea> This is an enabled textarea</textarea> <textarea disabled> This is a disabled textarea</textarea> </body> :enabled属性匹配第一个textare
2.选择已勾选的元素
:checked选择器可以选中checked属性或者用户勾选的单选按钮或者复选框。
<style> :checked + span { background-color: red; color: white; padding: 5px; border: medium solid black; } </style> 这里使用了兄弟选择器，改变复选框旁边的span元素的外观。
3.选择默认元素
:default选择器从一组类似的元素中默认元素。
<style> :default { outline: medium solid red; } </style> :default 选择器通常跟outline属性一起使用。
4.选择有效和无效的input元素
- :valid 匹配符合它们的输入验证要求的input元素。
- :invalid 匹配不符合它们的输入验证要求的input元素。
<style> :invalid { outline: medium solid red;} :valid { outline: medium solid green; } </style>
5.选择限定范围的input元素
关于输入验证的一种具体程度更高的变体是选择值限于指定范围的input元素。
- :in-range选择器匹配位于指定范围内的input元素。
- :out-of-range选择器匹配位于指定范围之外的input元素。
<style> :in-range { outline: medium solid green; } :out-of-range: { outline: medium solid red; } </style>
6.选择必需和可选的input元素
- :required选择器匹配具有re- required属性的input元素，这能够确保用户必须输入与input元素相关的值才能提交表单。
- :optional选择器匹配没有required属性的input元素。
<style> :required { outline: medium solid green; } :optional { outline: medium solid red; } </style>
