1. 什么是UI状态伪类选择器
在CSS中，伪类选择器可以帮助我们选择不同状态下的元素样式，例如hover（鼠标悬停）、active（激活）、focus（获得焦点）等等。而在UI设计中，界面元素的状态非常丰富，不仅仅局限于常规的鼠标事件。为了满足UI设计的需求，CSS提供了UI状态伪类选择器。UI状态伪类选择器可以选择元素在特定的界面状态下的样式，例如checked（选中）、disabled（禁用）、indeterminate（不确定）等等。
UI状态伪类选择器的语法非常简单，只需要在伪类前加上:，然后后面跟上状态名称即可。例如，选中状态的伪类选择器就是:checked:
input:checked {
background-color: orange;
}
2. 选中状态伪类选择器
2.1 :checked
在表单元素中，选中状态就是指该元素被用户选中，例如checkbox和radio类型的input元素。使用:checked伪类选择器可以很方便地选择该元素的选中状态。
下面是一个例子，当用户选中单选按钮时，它的背景颜色会变成红色：
input[type='radio']:checked {
background-color: red;
}
当然，checkbox类型的input元素同理。下面是一个例子，当用户选中复选框时，它的背景颜色会变成蓝色：
input[type='checkbox']:checked {
background-color: blue;
}
2.2 :indeterminate
:indeterminate用于一个checkbox元素既不是checked也不是unchecked的状态。这种状态通常在需要实现三态复选框时使用。
下面是一个例子，当用户点击三态复选框时，它的背景颜色会变成橙色：
input[type='checkbox']:indeterminate {
background-color: orange;
}
3. 禁用状态伪类选择器
3.1 :disabled
:disabled用于选择被禁用的表单元素。当一个表单元素被禁用时，用户无法对其进行交互操作（例如点击、输入等）。下面是一个例子，当用户禁用文本框时，它的背景颜色会变成灰色：
input[type='text']:disabled {
background-color: gray;
}
同样，button、select、textarea等表单元素也可以使用该伪类选择器。
3.2 :enabled
:enabled用于选择被启用的表单元素。与:disabled相对应，当一个表单元素被启用时，用户可以对其进行交互操作。
下面是一个例子，当用户启用按钮时，它的背景颜色会变成绿色：
button:enabled {
background-color: green;
}
4. 悬停状态伪类选择器
4.1 :hover
:hover用于选择鼠标悬停在元素上的状态。当鼠标悬停在一个元素上时，该元素会出现预定义的样式效果。下面是一个例子，当用户将鼠标悬停在链接上时，它的颜色会变成红色：
a:hover {
color: red;
}
4.2 :focus
:focus用于选择元素获得焦点的状态。当一个元素获得焦点时，通常是用户使用Tab键或鼠标单击使该元素处于活动状态。下面是一个例子，当用户在文本框中输入文本时，文本框的边框会变成蓝色：
input[type='text']:focus {
border: 1px solid blue;
}
同样，button、select、textarea等表单元素也可以使用该伪类选择器。
总结
在UI设计中，元素的状态非常丰富，使用UI状态伪类选择器可以方便地应对各种状态下的样式需求。上述伪类选择器已经可以满足大部分UI设计的需求，如果要实现更复杂的交互效果，还可以使用JavaScript等技术来实现。
需要注意的是，不同浏览器对UI状态伪类选择器的支持程度不同，因此在使用时需要进行兼容性测试。