优秀的编程知识分享平台

网站首页 > 技术文章 正文

CSS2与CSS3中常用的伪类汇总大全

nanyue 2025-01-06 14:39:46 技术文章 8 ℃

CSS2与CSS3中有非常多的伪类，可以用于实现各种强大的、酷炫的功能。有用于选择标签状态的，如：a:link a:hover input:checked input:focus等；也有用于根据结构选择标签的，如：li:first-child li:nth-child()等；甚至还有非常少用，但功能强大的，如：li:not() div:target等等。

CSS2的伪类大汇总：

E:link 动态伪类选择器，用于设置未访问的连接

E:visited 动态伪类选择器，用于设置已访问过的连接

E:hover 动态伪类选择器，用于设置鼠标移到标签上的效果

E:active 动态伪类选择器，用于设置鼠标点到连接上的效果

E:focus 焦点伪类选择器，用于设置输入框获取到焦点时的效果

E:lang(zh-cn) 语言伪类选择器，用于选择设置了对应语言的标签

E:first-child 结构伪类选择器，用于选择第一个子元素

CSS3的伪类大汇总：

E:last-child 结构伪类选择器，用于选择最后一个子元素

E:only-child 结构伪类选择器，用于选择仅有的一个子元素

E:nth-child(n) 结构伪类选择器，用于选择指定位置的某个元素

E:nth-last-child(n) 结构伪类选择器，用于选择倒数指定位置的某个元素

E:first-of-type 选择同类型中的第一个同级兄弟元素E

E:last-of-type 选择同类型中的最后一个同级兄弟元素E

E:only-of-type 选择同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n) 选择同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n) 选择同类型中的倒数第n个同级兄弟元素E

E:empty 选择没有任何子元素的元素E

E:checked 用于设置单选与复选框的选中项样式

E:enabled 用于设置可用的输入框的样式

E:disabled 用于设置禁用的输入框的样式

E:target 目标伪类选择器，用于设置当前锚点匹配的目标样式

E:not(s) 否定伪类选择器，用于否定某个选择器

E:root 用于选择文档的根元素，html文档根元素永远是<html>标签

这里面有非常多平时较少用到，但是功能强大的伪类。下面以 :checked为例给大家演示一下复选框的样式重置效果。

复选框与单选框在网页中是不能被随意更改外形的，但是可以使用 :checked伪类模仿一个复选框，这样就可以设置成我们想要看到的效果，例如：

要如何实现呢？

Tags：

猜你喜欢

最近发表
标签列表