CSS中伪元素和伪类的区别和作用?

  • 伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
  • 伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:
a:hover {color: #FF00FF}
p:first-child {color: red}

总结: 伪类是通过在元素选择器上加⼊伪类改变元素状态,⽽伪元素通过对元素的操作进⾏对元素的改变。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

曝光一下不发年终奖的企业

原文连接: 曝光一下不发年终奖的企业 今日热帖,看到网上发布的一篇帖子:请曝光一下不发年终奖的企业! 结果留言上百条,除了私企,还有很多国企,银行等。而且还有一些我们认为应该很赚钱的企业&a…

记一次重大的问题解决

问题的模样 我们是需要的操作两个git仓库的的三个分支(此处第一个仓库简称:A(负责程序的第一层进入),第二个简称B(负责业务的执行)) 大致就是A的代码引用了B,B的代码引…

opengl 学习着色器

一.GLSL 着色器是使用一种叫GLSL的类C语言写成的。GLSL着色器编码顺序:声明版本》定义输入输出》uniform》main函数。每个着色器的入口点是main函数,在main函数中我们处理所有的输入变量,并将结果输出到输出变量中。如下图: #ver…

Java之反射:Class类、调用构造方法、访问字段、访问方法

反射 什么是反射: ​ 反射是Java语法的一种高级特性,在“运行期间”对Java的类型信息进行检查,操作处理。例如:加载JDBC驱动类,Mybatis动态处理resultType,Spring根据配置创建Bean对象等使用场景都用反射…

CVE-2024-24565 CrateDB数据库任意文件读取漏洞

目录 前言 简介 ​编辑 环境搭建 漏洞复现 前言 本次介绍的漏洞不同与以往, 本次洞更多是适用于利用数据库提权。 利用数据库的导入导出数据的功能,我们往往可以将内部的一些敏感文件如/etc/passwd导入到数据库进行查看。也可以将数据导入到一些特…

SpringBoot + Thymeleaf打造VIP视频源解析网站

第一步&#xff1a;创建一个SpringBoot项目 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency><dependency><groupId>org.springframework.bo…

2024年刷题记录

马上要开始找实习了&#xff0c;又开始重启刷题计划了&#xff01;加油冲冲冲&#xff01;刷题的顺序follow代码随想录的60天刷题计划&#xff01;感谢FuCosmo的总结&#xff01;之前都是按照C的语法进行刷题的&#xff0c;这次也同样使用C。 Day 1 数组 这些题过年前都刷过了…

动态规划-背包问题进阶-完全背包和多重背包

我们之前讲过01背包&#xff0c;现在我们讲讲背包问题的进阶&#xff0c;先说完全背包。 完全背包相对于01背包的区别在于商店每个物品的无限性&#xff0c;就是可以被拿无数次&#xff0c;而01背包每个物品只能拿一次。 完全背包问题中&#xff0c;每个物品可以选择无限次&a…

【二叉树】遍历及构造

1. 定义 二叉树是一种树形数据结构&#xff0c;由节点组成&#xff0c;每个节点最多有两个子节点&#xff0c;分别为左子节点和右子节点。二叉树具有以下性质&#xff1a; 每个节点最多有两个子节点&#xff0c;称为左子节点和右子节点。 左子节点和右子节点可以为空&#xff0…

命令执行讲解和函数

命令执行漏洞简介 命令执行漏洞产生原因 应用未对用户输入做严格得检查过滤&#xff0c;导致用户输入得参数被当成命令来执行 命令执行漏洞的危害 1.继承Web服务程序的权限去执行系统命会或读写文件 2.反弹shell&#xff0c;获得目标服务器的权限 3.进一步内网渗透 远程代…

泛微e-office系统存在敏感信息泄露 附POC软件

免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. 泛微e-office系统简介 微信公众号搜索:南风漏洞复…

mysql 锁详解

目录 前言 一、全局锁 二、表级锁 三、行锁 前言 为什么要设计锁&#xff0c;锁设计初衷是为了解决多线程下并发问题。出现并发的时候用锁进行数据同步&#xff0c;避免因并发造成了数据错误(数据覆盖)。可见锁的重要性&#xff0c;并不是所有的数据库都有锁。比如Redis&a…

什么是CODESYS开发系统

CODESYS是一种用于工业自动化领域的开发系统软件&#xff0c;提供了一个完整集成的开发环境。该软件由德国CODESYS GmbH&#xff08;原 3S-Smart Software Solutions GmbH&#xff09;公司开发&#xff0c;其最新版本为CODESYS V3。 CODESYS开发系统具有多种特性和优点。首先&a…

⭐北邮复试刷题105. 从前序与中序遍历序列构造二叉树__递归分治 (力扣每日一题)

105. 从前序与中序遍历序列构造二叉树 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,…

Rocky 8.9 Kubespray v2.24.0 在线部署 kubernetes v1.28.6 集群

文章目录 1. 简介2. 预备条件3. 基础配置3.1 配置hostname3.2 配置互信 4. 配置部署环境4.1 在线安装docker4.2 启动容器 kubespray4.3 编写 inventory.ini4.4 关闭防火墙、swap、selinux4.5 配置内核模块 5. 部署6. 集群检查 1. 简介 kubespray​ 是一个用于部署和管理 Kuber…

抽象方法与设计模式

抽象方法与设计模式 设计模式的六大原则工厂模式单例模式建造者模式过滤器模式装饰器模式享元模式责任链模式模板模式 真正的屎山不是初级程序员写的巨量胶水代码&#xff0c;而是没学明白抽象的程序员写的大量设计模式耦合形成的。你甚至不理解为什么当初的创作者需要使用到这…

基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍

文章目录 一、Broadcast Channel1、创建实例2、监听消息3、发送消息4、关闭5、示例演示5.1、主控页面5.2、受控页面 二、postMessage1、语法1.1、targetWindow1.2、message1.3、targetOrigin1.4、transfer&#xff08;可选的&#xff09; 2、示例演示2.1、parent页面2.2、child…

Elsevier投稿录用后的一些疑问

在elsevier投稿被录用之后&#xff0c;会收到好几个邮件&#xff1a; 第一封邮件是给你一个在线修改稿子的网站&#xff0c;让你核实作者&#xff0c;文献等等的信息&#xff0c;以及编辑做的修改&#xff0c;要注意的是有几个query问题是必须回答的。然后你在线修改完提交就可…

CF1468J Road Reform 题解

CF1468J Road Reform 题解 link CF1468J Road Reform 题面翻译 给定一个有 n n n 个节点&#xff0c; m m m 条无向带权边的图&#xff0c;和一个参数 k k k&#xff0c;第 i i i 条边权值为 s i s_i si​。 现在你要保留这个图中的 n − 1 n-1 n−1 条边使得这个图变…

java导出动态下拉框excel模板

1.原始模板 2.导出模板,下拉框为数据库中得到动态数据 public void downloadTemplate(HttpServletResponse response) throws IOException {// 所有部门List<String, String> departments expertManageMapper.selectAllDepartment();//所有职位List<String, String&g…