css中常用的伪类样式

在 CSS 中，伪类（Pseudo-class）是一种用于指定特定状态或行为的选择器。伪类可以与元素其他选择器的组合使用，来选择文档的特定部分。以下是 CSS 中常用的伪类样式：

/* 链接相关的伪类 */
a:link { /* 未访问的链接 */ }
a:visited { /* 已访问的链接 */ }
a:hover { /* 当鼠标移动到链接上时 */ }
a:active { /* 链接被点击的状态 */ }

/* 输入相关的伪类 */
input:focus { /* 元素获得焦点 */ }
input:disabled { /* 元素被禁用 */ }
input:checked { /* 元素选中 */ }
input:not(:checked) { /* 未选中的元素 */ }

/* 用户界面相关的伪类 */
:root { /* 网页根元素 */ }
:focus { /* 文档中当前拥有焦点的元素，不一定是 input 元素 */ }
:active { /* 激活（被点击）的元素 */ }
:hover { /* 鼠标指针位于元素上方 */ }
:visited { /* 已访问的元素 */ }
:link { /* 未访问的元素 */ }

/* 索引相关的伪类 */
:nth-child(n) { /* 父元素下的第 n 个子元素 */ }
:last-child { /* 父元素下的最后一个子元素 */ }
:first-child { /* 父元素下的第一个子元素 */ }
:not(selector) { /* 选择所有不匹配：selector 的元素 */ }

/* 表单相关的伪类 */
:required { /* 必填字段 */ }
:optional { /* 可选字段 */ }
:invalid { /* 无效的输入（如 email、URL、电话） */ }
:valid { /* 有效的输入（如 email、URL、电话） */ }
:checked { /* 选中的复选框或单选框 */ }
:default { /* 被选定的默认值 */ }
:read-only { /* 只读字段（用户不能修改的） */ } 

在实际开发过程中，灵活使用伪类可以大大提高开发效率，同时也可以增强网站的用户体验效果。