介绍一下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…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...

苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...

FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏,有着深厚的文化底蕴。通过将五子棋制作成网页游戏,可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家,都可以通过网页五子棋感受到东方棋类…...