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

zhezhongyun 2025-05-30 18:58 38 浏览

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伪类模仿一个复选框，这样就可以设置成我们想要看到的效果，例如：

要如何实现呢？

CSS 伪类

上一篇：实用!这8个CSS工具可以提升编程速度
下一篇：什么是伪类和伪元素?两者有什么区别?单一冒号和双冒号有何不同

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）