伪类选择器

在CSS中，除了:hover之外，还有多种伪类选择器用于定义元素在不同状态下的样式。伪类选择器用于指定元素的特殊状态，而非伪元素（如::before和::after），后者用于样式化元素的特定部分或添加装饰内容。下面是一些常用的与用户交互相关的伪类选择器：

1. :hover

• 当用户的指针悬停在元素上时，应用样式。这是最常用的交互伪类之一，常用于链接、按钮和其他可交互元素。

2. :active

• 当元素被激活（例如，通过鼠标点击或键盘操作）时，应用样式。它通常用于提供点击或按下元素时的视觉反馈。

3. :focus

• 当元素获得焦点时（例如，通过点击、使用Tab键导航到元素或通过JavaScript设置焦点），应用样式。这对于增强可访问性和表单元素的视觉反馈特别重要。

4. :visited

• 仅适用于链接。当链接已被访问（即URL存在于用户的浏览器历史中）时，应用样式。由于隐私问题，这个伪类的样式化能力受到一定限制。

5. :link

• 用于尚未被访问的链接。通常与:visited一起使用，以区分已访问和未访问的链接。

6. :focus-within

• 当元素本身或其任何后代获得焦点时，应用样式。这对于当表单组件获得焦点时高亮显示整个表单区域特别有用。

7. :target

• 当URL的散列标识符（例如#section1）与文档中某个元素的ID匹配时，为该元素应用样式。这常用于突出显示锚链接目标或创建基于散列的tab界面。

8. :disabled 和 :enabled

• :disabled用于样式化被禁用的表单元素（如<input>, <button>, <select>等），而:enabled则用于样式化可用的表单元素。

9. :checked

• 应用于被选中的单选按钮（<input type="radio">）和复选框（<input type="checkbox">）。

10. :indeterminate

• 应用于状态不确定的输入元素，如复选框（在用户未明确选择时）和进度条（未指定值时）。

11. :valid 和 :invalid

• 这些伪类用于基于HTML5表单验证的输入元素。:valid应用于通过验证的元素，而:invalid应用于未通过验证的元素。

12. :required 和 :optional

• :required用于样式化设置了required属性的表单元素，:optional用于没有设置required属性的表单元素。

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

• 用于输入类型为<input type="number">、<input type="date">等的元素，当元素的值在规定范围内时，应用:in-range，否则应用:out-of-range。

14. :read-only 和 :read-write

• :read-only用于样式化设置了readonly属性的元素（如<input readonly>），:read-write用于可编辑的输入元素（没有设置readonly或disabled属性）。

这些伪类选择器允许你根据元素的状态或条件为元素应用不同的样式，从而创建更丰富和互动的用户界面。在使用时，应根据具体需求和上下文选择合适的选择器。