在 CSS 中,伪类(Pseudo-class)是一种用于指定特定状态或行为的选择器。伪类可以与元素其他选择器的组合使用,来选择文档的特定部分。以下是 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 { /* 只读字段(用户不能修改的) */ }
在实际开发过程中,灵活使用伪类可以大大提高开发效率,同时也可以增强网站的用户体验效果。
粉丝
0
关注
0
收藏
0