1. UI选择器
概念： UI选择器是对页面元素状态的一些过滤逻辑，如是否启用，是否通过验证等。
| 选择器 | 描述 | 案例 | 版本 |
|---|---|---|---|
| :enable | 选择被启用的元素 | input:enable{} | 3 |
| :disabled | 选择被禁用的元素 | input:disabled{} | 3 |
| :checked | 选择被选中的元素，有动态效果 | input:checked{} | 3 |
| :default | 选择默认的元素，被选中就是默认 | input:default{} | 3 |
| :valid | 选择通过验证的元素 | input:valid{} | 3 |
| :invalid | 选择未通过验证的元素 | input:invalid{} | 3 |
| :required | 选择有 required 属性的元素 |
input:required{} | 3 |
| :optional | 选择无 required 属性的元素 |
input:optional{} | 3 |
2. :enable / :disabled
布局：
<button type="button" >我没被禁用<tton>
<button type="button" >我没被禁用<tton>
<button type="button" disabled="disabled">我被禁用<tton>
<button type="button" disabled="disabled">我被禁用<tton>
样式：
button:enabled{
color: red;
}
button:disabled{
color: green;
}
3. :checked / :default
概念：
:default是利用代码使其默认被选中时才拥有样式，运行之后再去选中不会触发，即:default没有动态效果。:checked无关默认值，只要在运行中被选中就触发样式，即:checked有动态效果。
布局：
抽烟：<input type="checkbox" />
喝酒：<input type="checkbox" checked="checked" />
烫头：<input type="checkbox" />
样式：
/*具有动态效果*/
input:checked{
width: 1000px;
}
/*不具备动态效果*/
input:default{
height: 300px;
}
4. :valid / :invalid
概念： 验证不仅仅是 required ，还有 pattern 等，如果通过验证则..，未通过验证则..
布局：
<input required="required"/>
<input />
样式：
input:valid{
border: 1px solid green;
}
input{
border:1px solid red;
}
5 :required / :optional
布局：
<input required="required"/>
<input />
样式：
input:required{
border-bottom-color:red;
}
input:optional{
border-top-color:green;
}
