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

zhezhongyun 2025-05-23 21:29 19 浏览

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; }

结构位置伪类

1. 基础子元素选择

/* 偶数段落变红 */
p:nth-child(2n) { color: red; }

2. 类型过滤选择

/* 第一个<p>变红（跳过前面的<span>） */
p:first-of-type { color: red; }

3. 高级公式选择

选择器格式	说明
:nth-child(2n)	选择偶数元素（2,4,6...）
:nth-child(2n+1)	选择奇数元素（1,3,5...）
:nth-child(4n+1)	每4个中的第1个（1,5,9...）
:nth-last-child(2)	倒数第2个子元素

实际应用

  /* 每行第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; }

实战案例

新闻列表样式

/* 第一条新闻特殊样式 */
.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代码！

CSS 链接样式

上一篇：HTML语义化:构建更清晰、更易访问的网页
下一篇：CSS布局模式之Flex布局&Grid布局

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

一、基础交互伪类

1. 超链接状态伪类

2. 表单元素伪类

结构位置伪类

1. 基础子元素选择

2. 类型过滤选择

3. 高级公式选择

特殊状态伪类

实战案例

新闻列表样式

完整参考手册

相关推荐

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

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

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

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

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

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

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

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

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

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