CSS中的伪元素和伪类
一直被伪类和伪元素所迷惑,以为是同一个属性名称,根据CSS动画,索性开始研究a:hover:after,a.hover:after的用法。
伪元素
是HTML中并不存在的元素,用于将特殊的效果添加到某些选择器。

对伪元素的描述
伪元素有两个冒号:开头,然后是伪元素的名称。
使用两个冒号:是为了区别伪类和伪元素,当然考虑到兼容性,CSS2中已经存在的伪元素仍然可以使用一个冒号的语法,但是CSS3中新增的伪元素必须使用两个冒号。
一个选择器,只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。
从定义中我们可以指导,伪元素源来在DOM结构中不存在的,伪元素创建了一个容器,这个容器不包含在DOM结构中,但是有内容,使用content来添加内容,可以对其进行样式的自定义,可以获取其中的内容,为了规范,我们在伪元素前面加两个冒号,比如::after,但是为了兼容性,仍然使用了一个冒号的形式。

加入伪元素之后:

可以看到,:before里的内容添加在了相对.div1内容之前,同理,:after中的内容会出现在.div1 内容之后。当然如果对他们进行位置的设置,这种前后就只是一个说法上的区别了。
在我看来,:after和:before用处最大在于,减少html代码里的节点个数及内容。优化代码阅读。当我在特定区间加入某些内容时,只用CSS样式表中利用:after与:before来输入内容样式但更多的可以结合伪类:hover来设置动画样式。
如果我们利用伪元素进行动画样式,需要给父元素添加,需要给父元素添加样式{position:relative;},给:after或者:before添加{position:absolute;}

伪类
应用于一组HTML元素,用于向某些选择器添加特殊效果。

CSS3中的定义
伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
任何常规选择器可以在任何位置使用伪类,伪类的语法不区分大小写,一些伪类的作用会互斥,另外一些伪类可以被同一个元素使用。
并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的
伪类的作用是获取页面中不存在的信息,比如 标签中的:linked :visited,这些内容不存在页面当中,只能通过css选择器来获取。且一个元素可以同时设置多个伪类效果。
相关文章:
CSS中的伪元素和伪类
一直被伪类和伪元素所迷惑,以为是同一个属性名称,根据CSS动画,索性开始研究a:hover:after,a.hover:after的用法。 伪元素 是HTML中并不存在的元素,用于将特殊的效果添加到某些选择器。 对伪元素的描述 伪元素有两…...
逻辑优化基础-rewrite
简介 逻辑综合中的rewrite算法是一种常见的优化算法,其主要作用是通过对逻辑电路的布尔函数进行等效变换,从而达到优化电路面积、时序和功耗等目的。本文将对rewrite算法进行详细介绍,并附带Verilog代码示例。 一、算法原理 rewrite算法的…...
案例27-单表从9个更新语句调整为2个
目录 一:背景介绍 二:思路&方案 三:过程 1.项目结构 2.准备一个普通的maven项目,部署好mysql数据库 3.在项目中引入pom依赖 5.编写MyBitis配置文件 6.编写Mysql配置类 7.编写通用Update语句 8.项目启动类 四:总…...
Wordpress paid-memberships-pro plugins CVE-2023-23488未授权SQLi漏洞分析
目录 1.漏洞概述 2.漏洞等级 3.调试环境 4.漏洞代码 5 POC 1.漏洞概述 WordPress插件paid-memberships-pro版本<2.9.8中,容易受到REST路由“/pmpro/v1/order”的“code”参数中未验证的SQL注入漏洞的影响。攻击者可进行SQLi盲注,从而获取数据库权限。 CVE:...
【JavaWeb篇】JSTL相关知识点总结
目录 为什么会有JSTL? 什么是JSTL? 如何理解JSTL标准标签库呢? 如何使用JSTL? 第一步:引入JSTL标签库对应的jar包。 第二步:在JSP中引入要使用标签库。(使用taglib指令引入标签库。&#x…...
【蓝桥杯刷题】坑爹的负进制转换
【蓝桥杯刷题】——坑爹的负进制转换😎😎😎 目录 💡前言🌞: 💛坑爹的负进制转换题目💛 💪 解题思路的分享💪 😊题目源码的分享Ƕ…...
react+antdpro+ts实现企业级项目二:Strapi及认证登陆模块
在上一章节中,我们已经成功创建并登陆了系统,现在需要为系统添加权限和登录认证,以提高系统的安全性、数据保护、个性化服务和用户体验。此外,添加权限和登录认证还可以方便管理员进行用户和授权管理。为了快速开发前端࿰…...
Android ANR trace日志如何导出
什么是ANR ?上网搜索,一搜一大片,我就说个很容易识别的字眼,XXXAPP无响应 ANR trace日志如何导出?使用ADB命令: adb pull data/anr/trace.txt 你要存放的路径。查看ANR报错位置全局搜索你APP的包名&#x…...
Windows SSH 配置和SCP的使用
使用用户界面安装 ssh 功能 要在 Windows 10/11 上启用 SSH 服务器,请按照以下步骤操作: 按“Windows 键 I”打开“设置”菜单,然后选择“应用程序”。在左侧菜单栏中选择“应用和功能”。从列表中选择“可选功能”。 点击“添加功能”按钮…...
liunx 安装redsi和连接
liunx 安装redsi和连接 下载 (https://download.redis.io/releases/) 上传到 /usr/local目录 解压 tar -xvf redis-5.0.14.tar.gz 切换到 cd ./redis-5.0.14 编译 make 安装 make install 默认安装目录 /usr/local/bin/ 修改 ./redis-5.0.14/reds…...
接口里面可以写实现方法吗【可以】 、接口可以多继承吗【可以】
比如下面这道题: 问: 接口里面可以写方法吗? 答: 当然可以啊,默认就是抽象方法。 . 问: 那接口里面可以写实现方法吗? 答: 不可以,所有方法必须是抽象的。 . 问: 你确定吗࿱…...
【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.57】引入可形变卷积
文章目录前言一、解决问题二、基本原理三、添加方法四、总结前言 作为当前先进的深度学习目标检测算法YOLOv8,已经集合了大量的trick,但是还是有提高和改进的空间,针对具体应用场景下的检测难点,可以不同的改进方法。此后的系列…...
统计学习--三种常见的相关系数
1)Pearson积差相关系数:用于量度两个变量X和Y之间的线性相关。它具有1和-1之间的值,其中1是总正线性相关性,0是非线性相关性,并且-1是总负线性相关性。Pearson相关系数的一个关键数学特性是它在两个变量的位置和尺度的…...
基于Django4.1.4的入门学习记录
基于Django4.1.4的入门学习记录Django创建Django项目创建工程工程目录说明运行开发服务器settings.py配置文件应用的创建创建应用模块应用模块文件说明App应用配置注册安装子应用数据模型ORM概述定义模型类生成数据库表查看数据库文件Admin管理工具管理界面本地化创建管理员注册…...
C++ Butterworth N阶滤波器设计
介绍一个 Butterworth Nth 滤波器设计系数的函数,像 Matlab 函数一样的: [bl,al]butter(but_order,Ws); 和 [bh,ah]butter(but_order,2*bandwidth(1)/fs,high);rtfilter 在 Ububtu 中,容易找到: $ aptitude search ~dbutterwo…...
UXP下不用任何框架创建自己的插件并试运行
在上一篇文章中《Windows下vue框架下的UXP插件开发环境搭建及程序试运行》,搭建的是利用vue框架进行开发的UXP开发环境,而且是把官方的案例插件直接添加进UDT,下面要说的是不利用任何js的框架创建和试运行自己的UXP插件程序,这样来…...
mac修改国内源快速安装brew
我是参考了清华源官网,有任何困惑直接访问该网址即可。这里给出精简版。 1. 更改镜像到~/.zshrc 终端添加方式 echo export HOMEBREW_API_DOMAIN"https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles/api" >> ~/.zshrcecho export HOMEBREW_…...
Me-and-My-Girlfriend-1靶场通关
Me-and-My-Girlfriend-1靶场通关 靶机ip:192.168.112.135 信息收集 端口:22、80 还是从80WEB服务器端口入手 对服务器目录进行扫描,扫出以下目录 访问80端口WEB服务,显示一段文字只允许本地用户访问。 一眼伪造ip,查看页面…...
2.6 棋盘覆盖
在一个2*x2‘个方格组成的棋盘中,若怡有一个方格与其他方格不同,则称该方格为特殊方格,且称该棋盘为一特殊棋盘。显然,特殊方格在棋盘上出现的位置有 4种情形因而对任何k0,有4‘种特殊棋盘。图2-4 申的特殊棋益是12时 …...
JMU软件20 大数据技术复习(只写了对比18提纲的变动部分)
原博主 博客主页:https://xiaojujiang.blog.csdn.net/ 原博客链接:https://blog.csdn.net/qq_43058685/article/details/117883940 本复习提纲只适用于JMU软件工程大数据课程(ckm授课) 具体内容参考老师提纲的考纲,18和…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
