介绍一下CSS中伪类和伪元素的概念
一、伪类(Pseudo - Classes)
1. 定义
伪类是添加到选择器的关键字,用于定义元素的特殊状态。这些状态不是由文档树中的结构或属性来表示,而是基于用户行为(如鼠标悬停)、元素状态(如被选中)或文档结构的特定位置(如第一个子元素)等来确定。
2. 常见伪类
(1)链接伪类
- :link:用于选择未被访问的链接。例如,
a:link {color: blue;}
会将未访问的链接文字颜色设置为蓝色。 - :visited:用于选择已经被访问过的链接。由于隐私原因,可用于设置已访问链接的样式属性相对有限,主要是颜色相关属性。例如,
a:visited {color: purple;}
会将已访问的链接文字颜色设置为紫色。
(2)用户行为伪类
- :hover:当鼠标指针悬停在元素上方时应用样式。这是创建交互效果的常用伪类。例如,
button:hover {background - color: lightgray;}
,当鼠标悬停在按钮上时,按钮的背景颜色会变为浅灰色。 - :active:在元素被激活(如按下鼠标按键但尚未松开)时应用样式。例如,
a:active {color: red;}
,当用户点击链接但尚未松开鼠标时,链接文字颜色变为红色。
(3)结构伪类
- :first - child:选择作为其父元素的第一个子元素的元素。例如,
li:first - child {font - weight: bold;}
会将列表中的第一个li
元素字体加粗。 - :last - child:选择作为其父元素的最后一个子元素的元素。例如,
p:last - child {text - align: right;}
会将父元素中最后一个p
元素右对齐。 - :nth - child(n):选择作为其父元素的第 n 个子元素的元素。其中 n 可以是一个数字(如
3
表示第三个子元素)、关键字(如even
表示偶数位置的子元素,odd
表示奇数位置的子元素)或表达式(如2n + 1
表示从第一个子元素开始,每隔一个元素选择一个,即选择位置为 1、3、5 等的子元素)。例如,tr:nth - child(even) {background - color: #f2f2f2;}
会将表格中偶数行的背景颜色设置为浅灰色。
二、伪元素(Pseudo - Elements)
1. 定义
伪元素用于创建文档树中不存在的虚拟元素,并为其添加样式。它们允许你对元素的特定部分进行样式设置,就好像这些部分是独立的元素一样。
2. 常见伪元素
(1)::before 和::after
- ::before:在被选元素的内容前面插入内容。例如,
p::before {content: "前置内容";}
会在每个p
段落元素的内容前面添加 “前置内容” 字样。 - ::after:在被选元素的内容后面插入内容。例如,
p::after {content: "后置内容";}
会在每个p
段落元素的内容后面添加 “后置内容” 字样。这些插入的内容可以是文本、图像等,并且可以通过其他 CSS 属性进行样式设置,如color
、font - size
等。
(2)::first - letter 和::first - line
- ::first - letter:用于对元素的第一个字母进行特殊样式设置。常用于对段落的首字母进行放大、改变颜色等操作。例如,
p::first - letter {font - size: 200%; color: red;}
会将每个p
段落的第一个字母字体大小放大为原来的 2 倍,并设置为红色。 - ::first - line:用于对元素内容的第一行进行特殊样式设置。例如,
p::first - line {text - decoration: underline;}
会在每个p
段落的第一行添加下划线。
相关文章:
介绍一下CSS中伪类和伪元素的概念
一、伪类(Pseudo - Classes) 1. 定义 伪类是添加到选择器的关键字,用于定义元素的特殊状态。这些状态不是由文档树中的结构或属性来表示,而是基于用户行为(如鼠标悬停)、元素状态(如被选中&am…...
【橘子ES】熔断器Circuit breaker
一、相关概念 我们在日常的开发中,关于服务之间的熔断操作似乎很常见,当请求超过了我们服务所认为可以承受的一个上限阈值的时候,我们为了保护服务不会被进一步的高负载压崩溃,我们有时候会选择熔断请求,此时服务不再…...
6.4 CPU性能分析--Intel处理器跟踪技术
Intel处理器跟踪PT技术是记录程序执行过程的技术,它把记录信息编码报文存到高压缩率的二进制文件中。该二进制文件结合每条指令的时间戳重建执行流。PT技术覆盖度大,开销小,有关开销的信息详见,主要用于性能问题的事后分析和根因定…...

期权懂|如何用第三方平台开通期权?
期权小懂每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 如何用第三方平台开通期权? 如果不能满足常规的期权开户条件,可以考虑以下几种方法来尝试开户: 一、选择第三方平台: 通过网络搜…...
JS中const有没有变量提升
在JavaScript中,const 关键字用于声明一个只读的常量,其值在初始化后不能被重新赋值。关于变量提升(Hoisting),它是JavaScript中一个重要的概念,指的是无论变量或函数声明在何处,它们都会被“提…...

Axure RP全面介绍:功能、应用与中文替代方案
Axure RP是一款功能强大的原型设计工具,它被广泛应用于网页和移动应用的设计领域。Axure RP集成了设计、原型制作和文档管理,为产品管理人员、设计师和开发人员提供了一个综合的平台。让我们一步步了解Axure的基本功能、使用技巧以及中文支持平台——“在…...
WordPress用户首次登录强制修改密码
有些企业网站要求很高,比如用户首次登录强制要求修改密码,这里提供一段代码,用于实现强制修改密码供参考。 通过代码可以实现,用户正常注册或者管理员在后台添加用户时,会添加首次登录标记,用户首次登录后会…...

AI开源南京分享会回顾录
AI 开源南京分享会,已于2024年11月30日下午在国浩律师(南京)事务所5楼会议厅成功举办。此次活动由 KCC南京、PowerData、RISC-Verse 联合主办,国浩律师(南京)事务所协办。 活动以“开源视角的 AI 对话”为主…...

基于事件驱动的websocket简单实现
websocket的实现 什么是websocket? WebSocket 是一种网络通信协议,旨在为客户端和服务器之间提供全双工、实时的通信通道。它是在 HTML5 规范中引入的,可以让浏览器与服务器进行持久化连接,以便实现低延迟的数据交换。 WebSock…...

【leetcode100】反转链表
1、题目描述 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1] 2、初始思路 2.1 思路 # Definition for singly-linked list. # class ListNode: # …...

禅道Bug的一次迁移
一、场景 平时工作记录在公司禅道上的问题想备份一份到本地,但是又没有公司禅道的数据库信息,有时候出测试报告想批量调整数据方便截图很困难,同时也为了学习禅道数据流转过程,所以有了把缺陷保存到本地一份的想法。 实际上禅道支…...
c段和旁站讲解(附查询网址)
1. C段(C类子网段) C段就是一个IP地址的小范围。比如,假设你有一个家庭Wi-Fi网络,Wi-Fi会分配给你一组IP地址(每个设备一个IP地址)。如果你的网络分配的是类似 192.168.1.0 这样的IP地址,那么这…...
Linux编译Kernel时的文件zImage、文件dtb(dtbs)、核心模块分别是什么东西?
zImage文件的介绍 在编译Linux内核时,zImage 是一种内核映像文件,它是内核的压缩版本,通常用于引导嵌入式设备或其他资源有限的环境。 zImage 的具体含义 zImage 是 “Compressed Kernel Image” 的缩写。它是通过压缩原始的内核映像&…...
【深度学习】深刻理解“变形金刚”——Transformer
Transformer 是一种用于处理序列数据的深度学习模型架构,最初由 Vaswani 等人在 2017 年的论文《Attention is All You Need》中提出。它彻底改变了自然语言处理(NLP)领域,成为许多高级任务(如机器翻译、文本生成、问答…...
75_pandas.DataFrame 中查看和复制
75_pandas.DataFrame 中查看和复制 与pandas的DataFrame与NumPy数组ndarray类似,也有视图(view)和拷贝(copy)。 当使用loc[]或iloc[]等选择DataFrame的一部分以生成新的DataFrame时,与原对象共享内存的对…...

打电话玩手机识别-支持YOLO,COCO,VOC格式的标记,超高识别率可检测到手持打电话, 非接触式打电话,玩手机自拍等
打电话玩手机识别-支持YOLO,COCO,VOC格式的标记,超高识别率可检测到手持打电话, 非接触式打电话,玩手机自拍等1275个图片。 手持打电话: 非接触打电话 玩手机 数据集下载 yolov11:https://download.csdn…...

生产慎用之调试日志对空间矢量数据批量插入的性能影响-以MybatisPlus为例
目录 前言 一、一些缘由 1、性能分析 二、插入方式调整 1、批量插入的实现 2、MP的批量插入实现 3、日志的配置 三、默认处理方式 1、基础程序代码 2、执行情况 四、提升调试日志等级 1、在logback中进行设置 2、提升后的效果 五、总结 前言 在现代软件开发中,性能优…...
单片机:实现倒计时(附带源码)
使用单片机实现倒计时功能是一个常见的嵌入式应用,它能帮助你更好地理解如何进行时间控制和如何通过定时器实现精确的倒计时。通过该项目,你将学习如何使用单片机的定时器来进行时间计算,并通过LED或LCD显示倒计时的结果。 1. 项目概述 倒计…...
什么是多线程中的上下文切换
什么是多线程中的上下文切换 回答 上下文切换是指CPU从一个线程转到另一个线程时,需要保存当前线程的上下文状态,恢复另一个线程的上下文状态,以便于下一次恢复执行该线程时能够正确地运行。 在多线程编程中,上下文切换是一种常…...
如何在windwos批量拉取go mod
golang go-zero微服务开发,分的rpc项目太多了,变更了公共包,需要手动去拉取,直接一键拉取就好了,创建一个windwos脚本文件 文件名 tidy_all_go_mod.ps1 代码 # 辅助工具拉取go mod tidy # 根目录v99main执行 ./tidy_all_go_mod.ps1 # 定义项目的根目录 $RootDir Get-Locat…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...

YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...

c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...

蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...