CSS伪类选择器大全：提升网页交互与样式的神奇工具

欢迎大家来到IT世界,在知识的湖畔探索吧!

CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。

一、基础交互伪类

1. 超链接状态伪类

/* 未访问链接 */

a:link { color: green; }

/* 已访问链接 */

a:visited { color: purple; }

/* 鼠标悬停 */

a:hover { color: blue; }

/* 激活状态（点击时） */

a:active { color: red; }

记忆口诀：Love Hate (LVHA) – :link > :visited > :hover > :active

2. 表单元素伪类

/* 获取焦点时 */ input:focus { border-color: yellow; } /* 禁用状态 */ input:disabled { opacity: 0.5; } /* 选中状态 */ input:checked { background: green; } 

欢迎大家来到IT世界,在知识的湖畔探索吧!

结构位置伪类

1. 基础子元素选择

/* 偶数段落变红 */

p:nth-child(2n) { color: red; }

2. 类型过滤选择

/* 第一个<p>变红（跳过前面的<span>） */

p:first-of-type { color: red; }

3. 高级公式选择

实际应用

欢迎大家来到IT世界,在知识的湖畔探索吧! /* 每行第1张图去左边距 */ .item-list img:nth-child(4n+1) { margin-left: 0; } /* 每行第4张图去右边距 */ .item-list img:nth-child(4n) { margin-right: 0; } 

特殊状态伪类

 /* 隐藏空元素 */ :empty { display: none; } /* 反向选择 */ :not(.ignore) { font-weight: bold; } /* URL锚点目标 */ :target { animation: highlight 1s; } 

实战案例

新闻列表样式

欢迎大家来到IT世界,在知识的湖畔探索吧!/* 第一条新闻特殊样式 */ .nav a:first-child { font-size: 18px; background: #ccc; display: block; /* 独占一行 */ } /* 奇偶行span不同背景 */ .nav a:nth-child(2n) span { background: #e5a7b2; } .nav a:nth-child(2n+1) span { background: #e9d2da; }

完整参考手册

推荐查阅MDN官方文档获取最新最全的伪类列表：
伪类 – CSS：层叠样式表 | MDN

小贴士：伪类选择器可以组合使用，如 a:hover:first-child 表示鼠标悬停时的第一个子链接。

通过合理使用伪类选择器，可以极大提升网页的交互体验和视觉效果，而无需编写大量JavaScript代码！