UI伪类

1 .:enabled:如果一个元素可以被激活（选择，单机，输入等）或被聚焦，则该元素被启用。能被交互并且被交互过，就会显示这个可以匹配到的元素
2 .:disabled:具有启用状态的元素，当前被加上了disabled属性的时候.这里关键的是必须本来就能被启用才会被匹配，不具有启用状态的也不行,比如普通的div
3 .:read-only 用户不可编辑的元素
4 .:read-write 用户可编辑的元素
5 .:placeholder-shown:当前显示占位符文本的元素，包括具有占位符属性的元素，简单就是input里面的提示语
6 .:default:一组相关元素中默认的表单元素
7 .:checked:匹配当前选中的复选框和单选输入类型

input:checked{
          color: red;
          size: 100;
          height: 50px;
          width: 50px;
        }

8 .:valid:可以应用约束验证并且当前有效的表单控件
9 .:invalid:应用了约束验证并且当前无效的表单控件。比如required,pattern，step,max,min这些
10 .:in-range:当前值在min,max以及step指定的范围限制内
11 .:out-of-range:不在限制范围内的值
12 .:required:必须要填东西的元素被匹配到
13 .:optional:和required相反，不匹配不需要的元素
14 .:block都不支持，类似的是:empty:表示没有任何子元素的空元素。子元素可以是元素节点或文本.注释，处理指令和css不会影响元素是否被视为空
15 .caret-color: red;输入的闪动线。caret-color 属性规定 input、textareas 或任何可编辑元素中的光标（插入符号）的颜色。

select的选中标记,竟然是selected

<select name="" id="">
      <option value="1" >1</option>
      <option value="1" selected>2</option>
      <option value="1">3</option>
    </select>

placeholder

1 .placeholder是不可访问的。这个属性允许你在元素内容为空的时候显示的文本
2 .一般来说都是用来现实提示语句，辅助用户输入。但是这种功能应该用label来实现。placeholder应该用来现实当前的输入内容
3 .因为这样使用屏幕阅读器是无法访问，具有自动页面翻译功能的浏览器会跳过属性