1-4 UI元素状态伪类选择器

下面表单输入框中分别设置了hover、focus、active三种状态。

选择器：:hover:focus:active

姓名：

地址：

下面表单输入框分别对应可用enabled、不可用disabled两种状态。

选择器：:enabled:disabled

演示：

下面表单输入框分别对应只读read-only、可读写read-write两种状态。

选择器：:read-only:read-write

姓名：

地址：

下面输入框分别对应选中checked、默认选中default、一个都没选中（具有相同name）三种状态

选择器：:checked:default:indeterminate

兴趣爱好： 看电影 听音乐 爬山 踢足球 作诗 男 女

下面第一个输入框具有required验证属性（必须有输入才能验证通过，然后被选中），第二个没有

选择器：:valid:invalid

姓名：

地址：

下面第一个输入框具有required验证属性，第二个没有。
跟上面valid选择器的区别是，无论是否通过验证，只要具有required都会被选中

选择器：:required:optional

姓名：

地址：

下面的文字设置了选中部分的样式，选一下试试？

选择器：::selection
这里有一段文字，选中一部分试试？
这里有一段文字，选中一部分试试？
这里有一段文字，选中一部分试试？

type="number"的input超出设定的范围时会被out-of-range选中，
在范围之内时会被in-range选中

选择器：:in-range:out-of-range
请输入60~100之间的数值：