当前位置： 首页 > article >正文

CSS3 伪类和使用场景

article 2025/10/1 7:39:09

CSS3 伪类（Pseudo-classes）大全

CSS3 引入了许多新的伪类，以下是完整的 CSS3 伪类分类列表（包括 CSS2 的伪类）：

一、结构性伪类（Structural Pseudo-classes）

这些伪类根据元素在文档树中的位置选择元素

  1. :root - 选择文档的根元素（HTML 中通常是 <html>）
  2. :nth-child(n) - 选择父元素的第 n 个子元素
  3. :nth-last-child(n) - 从末尾开始计算的第 n 个子元素
  4. :nth-of-type(n) - 选择同类型的第 n 个兄弟元素
  5. :nth-last-of-type(n) - 从末尾开始计算的同类型第 n 个兄弟元素
  6. :first-child - 父元素的第一个子元素
  7. :last-child - 父元素的最后一个子元素
  8. :first-of-type - 同类型中的第一个兄弟元素
  9. :last-of-type - 同类型中的最后一个兄弟元素
  10. :only-child - 父元素中唯一的子元素
  11. :only-of-type - 父元素中唯一类型的子元素
  12. :empty - 没有子元素的元素（包括文本节点）

二、UI 状态伪类（UI State Pseudo-classes）

与用户界面状态相关

  1. :enabled - 启用的表单元素
  2. :disabled - 禁用的表单元素
  3. :checked - 被选中的单选/复选框
  4. :indeterminate - 不确定状态的复选框（如部分选中）
  5. :default - 默认选项（如提交按钮）
  6. :valid - 输入值有效的表单元素
  7. :invalid - 输入值无效的表单元素
  8. :in-range - 值在指定范围内的输入元素
  9. :out-of-range - 值超出指定范围的输入元素
  10. :required - 必填的表单元素
  11. :optional - 可选的表单元素
  12. :read-only - 只读的表单元素
  13. :read-write - 可读写的表单元素

三、用户交互伪类（User Action Pseudo-classes）

与用户交互相关

  1. :hover - 鼠标悬停时
  2. :active - 被激活时（如点击）
  3. :focus - 获得焦点时
  4. :focus-within - 子元素获得焦点时
  5. :focus-visible - 键盘操作获得焦点时（非鼠标点击）
  6. :target - URL 片段标识符指向的元素

四、语言相关伪类（Linguistic Pseudo-classes）

  1. :lang(language-code) - 基于语言属性的元素（如 <html lang="en">）

五、逻辑组合伪类（Logical Combination Pseudo-classes）CSS4

  1. :not(selector) - 不匹配给定选择器的元素
  2. :is(selector-list) - 匹配列表中任一选择器的元素
  3. :where(selector-list) - 与 :is 类似，但优先级为0
  4. :has(selector) - 包含匹配选择器的子元素的元素（CSS4，部分浏览器支持）

六、其他伪类

  1. :fullscreen - 全屏显示的元素
  2. :modal - 作为模态对话框的元素
  3. :picture-in-picture - 画中画模式的元素

使用示例

/* 结构性伪类 */
li:nth-child(2n) { background: #f0f0f0; }/* UI状态伪类 */
input:invalid { border-color: red; }/* 用户交互伪类 */
button:hover { background: #ddd; }/* 逻辑组合伪类 */
div:not(.special) { opacity: 0.8; }

注意：部分伪类（特别是 CSS4 的 :has）可能需要检查浏览器兼容性。

CSS 伪元素使用场景

伪元素是 CSS 提供的强大工具，它们允许你为元素添加装饰性内容或样式特定部分，而无需修改 HTML 结构。以下是使用伪元素的典型场景：

1. 添加装饰性内容时

适用伪元素：::before、::after

  • 添加图标、分隔符等视觉元素
h2::before {content: "◆";margin-right: 10px;color: #ff6b6b;
}
  • 创建工具提示
.tooltip:hover::after {content: attr(data-tooltip);position: absolute;/* 其他样式 */
}

2. 处理文本特殊部分时

适用伪元素：::first-letter、::first-line

  • 首字下沉效果
article p::first-letter {font-size: 3em;float: left;line-height: 0.8;
}
  • 段落首行特殊样式
.intro::first-line {font-weight: bold;color: #2c3e50;
}

3. 处理表单元素时

适用伪元素：::placeholder、::selection

  • 自定义占位文本样式
input::placeholder {color: #95a5a6;font-style: italic;
}
  • 自定义文本选中样式
::selection {background: #f39c12;color: white;
}

4. 创建视觉效果时

  • 清除浮动（经典用法）
.clearfix::after {content: "";display: table;clear: both;
}
  • 创建纯CSS图形
.triangle {position: relative;
}
.triangle::after {content: "";position: absolute;border: 10px solid transparent;border-top-color: #3498db;
}

5. 优化列表样式时

适用伪元素：::marker

  • 自定义列表标记
ul.custom-list li::marker {content: "→";color: #e74c3c;
}

6. 处理媒体元素时

适用伪元素：::backdrop

  • 全屏视频的背景样式
video::backdrop {background-color: #2c3e50;
}

何时应该避免使用伪元素？

  1. 关键功能内容：伪元素生成的内容不会被屏幕阅读器读取，也不属于DOM
  2. 需要交互的元素：伪元素不能被JavaScript直接操作
  3. 过度复杂的设计：当HTML结构能更清晰地表达内容时

最佳实践

  1. 语义优先：先用HTML表达内容结构，再用伪元素添加装饰
  2. 适度使用：避免过度依赖伪元素导致样式难以维护
  3. 浏览器兼容性：检查目标浏览器的支持情况
  4. 性能考虑：大量使用伪元素可能影响渲染性能

相关文章：

CSS3 伪类和使用场景

CSS3 伪类&#xff08;Pseudo-classes&#xff09;大全 CSS3 引入了许多新的伪类&#xff0c;以下是完整的 CSS3 伪类分类列表&#xff08;包括 CSS2 的伪类&#xff09;&#xff1a; 一、结构性伪类&#xff08;Structural Pseudo-classes&#xff09; 这些伪类根据元素在文…...

编程日记 2025/7/8 14:52:54

Shadertoy着色器移植到Three.js经验总结

Shadertoy是一个流行的在线平台&#xff0c;用于创建和分享WebGL片段着色器。里面有很多令人惊叹的画面&#xff0c;甚至3D场景。本人也移植了几个ShaderToy上的着色器。本文将详细介绍移植过程中需要注意的关键点。 1. 基本结构差异 想要移植ShaderToy的shader到three.js&am…...

编程日记 2025/9/18 0:39:22

电脑端音乐播放器推荐：提升你的听歌体验！

在快节奏的职场环境中&#xff0c;许多上班族都喜欢用音乐为工作时光增添色彩。今天要分享的这款音乐工具&#xff0c;或许能为你的办公时光带来意想不到的惊喜。 一、软件介绍-澎湃 澎湃音乐看似是个普通的播放器&#xff0c;实则藏着强大的资源整合能力。左侧功能栏清晰陈列着…...

编程日记 2025/9/18 21:49:29

VIC-2D 7.0 为平面样件机械试验提供全视野位移及应变数据软件

The VIC-2D系统是一个完全集成的解决方案&#xff0c;它基于优化的相关算法为平面试样的力学测试提供非接触、全场的二维位移和应变数据&#xff0c;可测量关注区域内的每个像素子集的面内位移&#xff0c;并通过多种张量选项计算全场应变。The VIC-2D 系统可测量超过 2000%变形…...

编程日记 2025/10/1 6:50:30

一周学完计算机网络之三：1、数据链路层概述

简单的概述 数据链路层是计算机网络体系结构中的第二层&#xff0c;它在物理层提供的基本服务基础上&#xff0c;负责将数据从一个节点可靠地传输到相邻节点。可以将其想象成一个负责在两个相邻的网络设备之间进行数据 “搬运” 和 “整理” 的 “快递中转站”。 几个重要概念…...

编程日记 2025/9/16 0:11:17

网卡网孔速率的协商是如何进行的？

网卡与交换机等网络设备之间的速率协商主要通过**自动协商&#xff08;Auto-Negotiation&#xff09;**机制实现&#xff0c;其核心是物理层&#xff08;PHY&#xff09;芯片之间的信息交互。以下是协商过程的详细解析&#xff1a; 一、自动协商的核心流程 1. 发送配置帧&am…...

编程日记 2025/6/7 9:46:46

单片机-STM32部分：13-1、蜂鸣器

飞书文档https://x509p6c8to.feishu.cn/wiki/V8rpwIlYIiEuXLkUljTcXWiKnSc 一、应用场景 大部分的电子产品、家电&#xff08;风扇、空调、电水壶&#xff09;都会有蜂鸣器&#xff0c;用于提示设备的工作状态 二、原理 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0…...

编程日记 2025/9/16 0:11:11

动态IP技术赋能业务创新：解锁企业数字化转型新维度

在数字经济高速发展的今天&#xff0c;IP地址已不再是简单的网络标识符&#xff0c;而是演变为支撑企业数字化转型的核心基础设施之一。动态IP技术凭借其灵活、高效、安全的特性&#xff0c;正在重塑传统业务模式&#xff0c;催生出诸多创新应用场景。本文将深入剖析动态IP的技…...

编程日记 2025/9/16 2:35:03

使用Python删除PDF中多余或空白的页面

目录 为什么需要删除 PDF 中的多余或空白页面&#xff1f; 所需工具 环境准备 如何使用Python删除PDF中的多余页面 实现思路 详细实现步骤 实现代码 如何使用Python检测并删除PDF中的空白页 实现思路 详细实现步骤 实现代码 在处理 PDF 文件时&#xff0c;常常会遇到…...

编程日记 2025/9/19 8:25:50

英语复习笔记 1

前言 我们知道英语最重要就是单词和阅读理解&#xff0c;因为时间安排和自己懒惰的原因&#xff0c;英语复习实际上进行得非常缓慢。实际上英语复习得比较少&#xff0c;但是我想考一个高分&#xff0c;这样下去肯定是废掉了。所以从今天开始我要好好复习英语。之前有个大佬说…...

编程日记 2025/9/20 19:15:12

UART16550 IP core笔记二

XIN时钟 表示use external clk for baud rate选型&#xff0c;IP核会出现Xin时钟引脚 XIN输入被外部驱动&#xff0c;也就是外部时钟源&#xff0c;那么外部时钟必须要满足特定的要求&#xff0c;就是XIN 的range范围是xin<S_AXI_CLK/2,如果不满足这个条件&#xff0c;那么A…...

编程日记 2025/9/18 23:23:09

TDengine 在金融领域的应用

简介 金融行业正处于数据处理能力革新的关键时期。随着市场数据量的爆炸式增长和复杂性的日益加深&#xff0c;金融机构面临着寻找能够高效处理大规模、高频次以及多样化时序数据的大数据处理系统的迫切需求。这一选择将成为金融机构提高数据处理效率、优化交易响应时间、提高…...

编程日记 2025/9/19 15:28:10

OSCP - Hack The Box - Sau

主要知识点 CVE-2023-27163漏洞利用systemd提权 具体步骤 执行nmap扫描&#xff0c;可以先看一下55555端口 Nmap scan report for 10.10.11.224 Host is up (0.58s latency). Not shown: 65531 closed tcp ports (reset) PORT STATE SERVICE VERSION 22/tcp o…...

编程日记 2025/9/16 7:59:33

大模型的Lora如何训练？

大模型LoRA（Low-Rank Adaptation）训练是一种参数高效的微调方法，通过冻结预训练模型权重并引入低秩矩阵实现轻量化调整。以下是涵盖原理、数据准备、工具、参数设置及优化的全流程指南： 一、LoRA的核心原理 低秩矩阵分解 在原始权重矩阵$ W 旁添加两个低秩矩阵 旁添加两个…...

编程日记 2025/6/30 7:05:16

分词器工作流程和Ik分词器详解

切分词语&#xff0c;normalization 给你一段句子&#xff0c;然后将这段句子拆分成一个一个的单个的单词&#xff0c;同时对每个单词进行 normalization&#xff08;时态转换&#xff0c;单复数转换&#xff09;&#xff0c;分词器 recall&#xff0c;召回率&#xff1a;搜索的…...

编程日记 2025/7/14 2:54:14

QT6 源（93）篇三：阅读与注释共用体类 QVariant 及其源代码，本类支持比较运算符 ==、!=。

&#xff08;9&#xff09; 本类支持比较运算符 、! &#xff1a; 可见&#xff0c; QString 类型里可存储多个 unicode 字符&#xff0c;即使只存储一个 unicode 字符也不等于 QChar。 &#xff08;10&#xff09;本源代码来自于头文件 qvariant . h &#xff1a; #ifndef Q…...

编程日记 2025/9/18 22:10:21

Maven私服搭建与登录全攻略

目录 1.背景2.简介3.安装4.启动总结参考文献 1.背景 回顾下maven的构建流程&#xff0c;如果没有私服&#xff0c;我们所需的所有jar包都需要通过maven的中央仓库或者第三方的maven仓库下载到本地&#xff0c;当一个公司或者一个团队所有人都重复的从maven仓库下载jar包&#…...

编程日记 2025/9/17 20:46:44

力扣210（拓扑排序）

210. 课程表 II - 力扣&#xff08;LeetCode&#xff09; 这是一道拓扑排序的模板题。简单来说&#xff0c;给出一个有向图&#xff0c;把这个有向图转成线性的排序就叫拓扑排序。如果有向图中有环就没有办法进行拓扑排序了。因此&#xff0c;拓扑排序也是图论中判断有向无环图…...

编程日记 2025/9/22 3:21:31

1.1 文章简介

前因后果链 行业需求 → 技能断层 → 课程设计响应 (高薪岗位要求数学基础) → (符号/公式理解困难) → (聚焦原理与应用) 行业驱动因素 • 前因&#xff1a;机器学习/AI等领域的高薪岗位激增&#xff0c;但数学能力成为主要门槛 • 关键矛盾&#xff1a;算法论文中的数学…...

编程日记 2025/9/20 10:05:01

将本地文件上传到云服务器上

使用 SCP 命令&#xff08;最常用&#xff09; # 基本语法 scp [本地文件路径] [用户名][服务器IP]:[目标路径]# 示例&#xff1a;上传单个文件 scp /path/to/local/file.txt root192.168.1.100:/path/to/remote/# 上传整个目录 scp -r /path/to/local/directory root192.168.…...

编程日记 2025/7/10 9:24:09

C++ asio网络编程(5)简单异步echo服务器

上一篇文章:C asio网络编程(4)异步读写操作及注意事项 文章目录 前言一、Session类1.代码2.代码详解3.实现Session类1.构造函数2.handle_read3.介绍一下boost的封装函数和api4.handle_write 二、Server类1.代码2.代码思路详解 三、客户端四、运行截图与流程图 前言 提示&…...

编程日记 2025/9/16 0:11:23

【机器人】复现 UniGoal 具身导航 | 通用零样本目标导航 CVPR 2025

UniGoal的提出了一个通用的零样本目标导航框架&#xff0c;能够统一处理多种类型的导航任务。 支持 对象类别导航、实例图像目标导航和文本目标导航&#xff0c;而无需针对特定任务进行训练或微调。 本文分享UniGoal复现和模型推理的过程&#xff5e; 查找沙发&#xff0c;模…...

编程日记 2025/9/16 0:11:19

基于大模型预测的吉兰 - 巴雷综合征综合诊疗方案研究报告大纲

目录 一、引言（一）研究背景（二）研究目的与意义二、大模型预测吉兰 - 巴雷综合征的理论基础与技术架构（一）大模型原理概述（二）技术架构设计三、术前预测与手术方案制定（一）术前预测内容（二）手术方案制定依据与策略四、术中监测与麻醉方案调整（一）术中监测指标与数…...

编程日记 2025/6/5 20:56:49

spring中的@PropertySource注解详解

一、核心功能与作用 PropertySource是Spring框架中用于加载外部配置文件的核心注解&#xff0c;主要作用是将属性文件&#xff08;如.properties、.yml&#xff09;的键值对加载到Spring的Environment环境中&#xff0c;实现配置与代码的解耦。其核心价值包括&#xff1a; 外部…...

编程日记 2025/9/16 0:11:25

ChromeDriver 技术生态与应用场景深度解析

ChromeDriver 技术生态与应用场景深度解析 随着 Web 自动化测试、运维和数据采集需求的不断增长&#xff0c;ChromeDriver 及其相关技术栈在各行业中扮演着举足轻重的角色。本文将从技术选型、语言适配、典型场景、技术延伸等维度&#xff0c;结合最新行业趋势与实践经验&…...

编程日记 2025/7/16 20:23:57

【NextPilot日志移植】日志写入流程

&#x1f4dd; 文件后端日志写入流程详解 当后端选择文件时&#xff0c;日志写入过程主要涉及 LogWriter 和 LogWriterFile 类的协作。以下是详细的日志写入过程解释及涉及的代码&#xff1a; 1. LogWriter 类初始化 在 LogWriter 类的构造函数中&#xff0c;如果配置的后端…...

编程日记 2025/7/20 0:38:56

二极管钳位电路——Multisim电路仿真

目录 二极管钳位电路 2.1 二极管正向钳位电路 二极管压降测试 2.1.1 二极管正向钳位电路图 2.1.2 二极管正向钳位工作原理 2.2 二极管负向钳位电路 2.2.1 二极管负向钳位电路图 2.2.2 二极管负向钳位工作原理 二极管正向反向钳位仿真电路实验结果 2.3 二极管顶部钳位…...

编程日记 2025/9/16 0:11:21

Docker编排工具---Compose的概述及使用

目录 一、Compose工具的概述 二、Compose的常用命令 1、列出容器 2、查看访问日志 3、输出绑定的公共端口 4、重新构建服务 5、启动服务 6、停止服务 7、删除已停止服务的容器 8、创建和启动容器 9、在运行的容器中执行命令 10、指定一个服务启动容器的个数 11、其…...

编程日记 2025/9/23 23:03:46

5.10-套接字通信 - C++

套接字通信 1.1 通信效率问题 服务器端 单线程 / 单进程 无法使用&#xff0c;不支持多客户端 多线程 / 多进程 写程序优先考虑多线程&#xff1a;什么时候考虑多进程&#xff1f; 启动了一个可执行程序 A &#xff0c;要在 A 中启动一个可执行程序 B 支持多客户端连接 IO 多…...

编程日记 2025/9/18 23:35:57

suricata增加单元测试编译失败

一、环境 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammysuricata: suricata7.0.5 IDE: vscode 二、背景 在suricata中开发了某个功能后&#xff0c;增加unittest时&#xff0c;…...

编程日记 2025/9/22 0:41:42