ui状态伪类选择器详细说明以及案例

UI状态伪类选择器用于根据元素的状态来选择元素，通常用于表单元素或交互元素。以下是一些常见的UI状态伪类选择器及案例：

1. :enabled 和 :disabled

• :enabled：选择启用状态的元素。

• :disabled：选择禁用状态的元素。

案例：

input:enabled {
  background-color: #fff;
}

input:disabled {
  background-color: #ccc;
}

2. :checked

• :checked：选择被选中的单选按钮或复选框。

案例：

input[type="checkbox"]:checked {
  border-color: green;
}

3. :focus

• :focus：选择当前获得焦点的元素。

案例：

input:focus {
  border-color: blue;
}

4. :hover

• :hover：选择鼠标悬停在其上的元素。

案例：

button:hover {
  background-color: yellow;
}

5. :active

• :active：选择被激活（例如鼠标点击）的元素。

案例：

button:active {
  background-color: red;
}

6. :visited

• :visited：选择已被访问过的链接。

案例：

a:visited {
  color: purple;
}

7. :valid 和 :invalid

• :valid：选择内容验证通过的元素。

• :invalid：选择内容验证未通过的元素。

案例：

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

8. :required 和 :optional

• :required：选择必填项的元素。

• :optional：选择可选项的元素。

案例：

input:required {
  border-color: orange;
}

input:optional {
  border-color: gray;
}

9. :read-only 和 :read-write

• :read-only：选择只读属性的元素。

• :read-write：选择可读写的元素。

案例：

input:read-only {
  background-color: #eee;
}

input:read-write {
  background-color: #fff;
}

10. :in-range 和 :out-of-range

• :in-range：选择值在指定范围内的元素。

• :out-of-range：选择值超出指定范围的元素。

案例：

input:in-range {
  border-color: green;
}

input:out-of-range {
  border-color: red;
}

这些伪类选择器可以帮助你根据元素的不同状态来应用不同的样式，提升用户体验。