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和…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
