当前位置： 首页 > news >正文

深入理解伪元素与伪类元素

news 2026/4/4 7:03:14

在“探秘盒子浮动，破解高度塌陷与文字环绕难题，清除浮动成关键！”中，我们讲到如果父盒由于各种原因未设置高度， 子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题，我们可以添加伪元素。

一、伪元素（创造虚拟元素）

1、概念

伪元素可以创建一些不在文档树中的元素，并为其添加样式。其中，::before 和::after 伪元素是最为常用的。

2、属性

::before 伪元素可以在元素内容的前面插入额外的内容。比如，我们可以为一个标题添加一个装饰性的图标，通过::before 伪元素来实现。

::after 伪元素则在元素内容的后面插入内容。例如，为一个段落添加下划线效果，或者在列表项后面添加一个特殊的符号。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素</title>
</head>
<style>section{border: 4px solid #000;background-color: bisque;}#div1{width: 15%;height: 100px;background-color: aqua;border: 5px solid #000;margin-bottom: 5px;float: left;}#div3{width: 10%;height: 100px;background-color: pink;border: 5px solid #000;margin-bottom: 5px;float: left;}section{border: 4px solid #000;}footer{width: 100%;height: 100px;background-color:orange;border: 5px solid #000;}/* 伪类选择器 */.clear_ele::after{content: ""; /* 这是必须配置的属性，代表这个盒子的存在 */display: block;clear: both;}</style>
<body><section class="clear_ele"><!-- ::before --><div id="div1"></div><div id="div3"></div><!-- ::after --></section><footer>网页页脚</footer>
</body>
</html>

运行结果如下：

这与之前的 “<div style="clear: both;" id="div5"></div>”相似，都可以解决网页因为浮层而产生高度塌陷的问题，添加伪元素可以不破坏网页代码的骨架，所以比较推荐大家使用。

二、伪类元素

1、伪类选择器的运用

主要运用于导航栏或者超链接的样式设计

在默认的浏览器方式下,超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。

这种最基本的超链接样式已经无法滿足设计人员的要求。通过 css可以设置超链接的各种属性,而且通过伪类还可以制作出许多动态效果。

2、属性

  • link:访问前的样式；
  • active：点击时的样式；
  •  visited ：访问后的样式；
  • hover：鼠标悬停在上面的样式

需要说明的是，这 4 种状态的顺序不能颠倒。否则可能会导致伪类样式不能实现。这4种状态并不是每次都要用到,一般情况下只需要定义链按标签的样式以及：hover 伪类样式即可。

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title>
</head>
<style>.clear_ele a{text-decoration: none;}/* 访问前的样式 */.clear_ele a:link{color: black;  } /* 访问后的样式 */.clear_ele a:visited{color: blue;  }.clear_ele a:hover{/* 鼠标悬停在上面，文字的颜色 */color: red;}</style>
<body><section class="clear_ele"><a href="#">百度一下，你就知道</a></section>
</body>
</html>

运行结果如下：

点击链接前的效果

 

 鼠标悬停在链接上的效果

点击链接后的效果

相关文章：

深入理解伪元素与伪类元素

在“探秘盒子浮动&#xff0c;破解高度塌陷与文字环绕难题&#xff0c;清除浮动成关键&#xff01;”中&#xff0c;我们讲到如果父盒由于各种原因未设置高度&#xff0c; 子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题&#xff0c;我们可以添加伪元素。 一、伪元素…...

编程日记 2024/10/21 19:40:02

HDU Romantic

题目大意&#xff1a;现在告诉你两个非负整数 a 和 b。找到满足 X*a Y*b 1 的非负整数 X 和整数 Y。如果没有这样的答案&#xff0c;请写 “sorry”。 思路&#xff1a;这是一道扩展欧几里得模板题&#xff0c;唯一容易错的就是 x 有可能是负数&#xff0c;要把它改成非负数…...

编程日记 2024/10/21 19:39:00

[每日一练]通过shift移动函数实现连续数据的需求

该题目来源于力扣&#xff1a; 603. 连续空余座位 - 力扣&#xff08;LeetCode&#xff09; 题目要求&#xff1a; 表: Cinema------------------- | Column Name | Type | ------------------- | seat_id | int | | free | bool | ------------------- Seat_id…...

编程日记 2024/10/21 19:37:59

go 中的斐波那契数实现以及效率比较

package mainimport ("fmt""math/big""time" )// FibonacciRecursive 使用递归方法计算斐波那契数列的第n个数 func FibonacciRecursive(n int) *big.Int {if n < 1 {return big.NewInt(int64(n))}return new(big.Int).Add(FibonacciRecursiv…...

编程日记 2024/10/21 19:36:58

基于ASP.NET的小型超市商品管理系统

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图 前言 示 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 小型超市商品管理系统是一款针对小型超市日常运营需求设计的软件解决方案。该系统主要内容有商品类别…...

编程日记 2024/10/21 19:33:55

spdlog学习记录

spdlog Loggers&#xff1a;是 Spdlog 最基本的组件&#xff0c;负责记录日志消息。在 Spdlog 中&#xff0c;一个 Logger 对象代表着一个日志记录器&#xff0c;应用程序可以使用 Logger 对象记录不同级别的日志消息Sinks&#xff1a;决定了日志消息的输出位置。在 Spdlog 中&…...

编程日记 2024/10/21 19:30:52

linux替换某个文件的某段内容命令

假设文件是a.sql 里面的库是abc&#xff0c;我想把这个abc给替换掉&#xff0c;改成hahaha cat a.sql |grep abc|sed -i s/abc/hahaha/g a.sql 如果想写个脚本指定整个文件夹中的内容替换 #!/bin/bash # 检查是否提供了文件夹路径 if [ -z "\$1" ]; then echo &…...

编程日记 2024/10/21 19:28:49

什么是SQL注入攻击？如何防止呢？

目录 一、什么是SQL注入&#xff1f; 二、如何防止&#xff1f; 2.1 使用预编译语句 2.2 使用 ORM 框架 2.3 用户输入校验 一、什么是SQL注入&#xff1f; SQL 注入是一种常见的网络安全漏洞&#xff0c;攻击者通过在应用程序的用户输入中插入恶意的 SQL 代码&#xff…...

编程日记 2024/10/21 19:25:44

consumer 角度讲一下i2c外设

往期内容 I2C子系统专栏&#xff1a; I2C&#xff08;IIC&#xff09;协议讲解-CSDN博客SMBus 协议详解-CSDN博客I2C相关结构体讲解:i2c_adapter、i2c_algorithm、i2c_msg-CSDN博客内核提供的通用I2C设备驱动I2c-dev.c分析&#xff1a;注册篇内核提供的通用I2C设备驱动I2C-dev.…...

编程日记 2024/10/21 19:24:41

面试经典150题刷题记录

数组部分 1. 合并两个有序的子数组 —— 倒序双指针避免覆盖 88. 合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使…...

编程日记 2024/10/21 19:23:38

【HarmonyOS NEXT】实现保存base64图片到图库

上篇文章介绍了HarmonyOS NEXT如何保存base64文件到download目录下&#xff0c;本次介绍如何保存base64图片到图库&#xff0c;网络图片保存方式大同小异&#xff0c;先下载图片&#xff0c;然后再保存 phAccessHelper.showAssetsCreationDialog参考官方文档’ ohos.file.pho…...

编程日记 2024/10/21 19:22:37

开题答辩最怕被问什么？教你用ChatGPT轻松准备，稳拿高分！

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 开题答辩是学位论文写作过程中的重要环节&#xff0c;能帮助导师评估你的研究计划是否可行&#xff0c;并对后续写作起到指导作用。很多同学在面对导师提问时会感到紧张&#xff0c;因此提前准备好常见问题的…...

编程日记 2024/10/21 19:21:35

Unity3D功耗和发热分析与优化详解

前言 Unity3D作为广泛使用的游戏开发引擎&#xff0c;在游戏开发过程中&#xff0c;功耗和发热问题一直是开发者需要重点关注的问题。功耗和发热不仅影响用户体验&#xff0c;还可能对设备的硬件寿命造成一定影响。本文将从技术角度详细分析Unity3D游戏在移动设备上的功耗和发…...

编程日记 2024/10/21 19:20:26

深度学习中的掩码介绍

在深度学习中，**掩码（Mask）**通常用于屏蔽掉某些特定部分的数据，以确保模型在训练或推理时不处理无效或无关的输入。掩码的使用场景主要包括处理变长序列、生成模型中的自回归任务、处理填充数据等。掩码可以是二值矩阵（1 表示有效数据，0 表示屏蔽数据），在注意力机制中…...

编程日记 2024/10/21 19:15:18

rust高级进阶总结

文章目录 前言1. Rust生命周期进阶一、不太聪明的生命周期检查&#xff08;一&#xff09;例子1&#xff08;二&#xff09;例子2 二、无界生命周期三、生命周期约束&#xff08;HRTB&#xff09;&#xff08;一&#xff09;语法及含义&#xff08;二&#xff09;综合例子 四、…...

编程日记 2024/10/21 19:14:17

整理—计算机网络

目录 网络OSI模型和TCP/IP模型 应用层有哪些协议 HTTP报文有哪些部分 HTTP常用的状态码 Http 502和 504 的区别 HTTP层请求的类型有哪些&#xff1f; GET和POST的使用场景&#xff0c;有哪些区别&#xff1f; HTTP的长连接 HTTP默认的端口是什么&#xff1f; HTTP1.1怎…...

编程日记 2024/10/21 19:12:14

分布式数据库环境（HBase分布式数据库）的搭建与配置

分布式数据库环境&#xff08;HBase分布式数据库&#xff09;的搭建与配置 1. VMWare安装CentOS7.9.20091.1 下载 CentOS7.9.2009 映像文件1.2启动 VMware WorkstationPro&#xff0c;点击“创建新的虚拟机”1.3在新建虚拟机向导界面选择“典型&#xff08;推荐&#xff09;”1…...

编程日记 2024/10/21 19:11:12

100个JavaWeb(JDBC, Servlet, JSP)毕业设计选题

100个JavaWeb(JDBC, Servlet, JSP)毕业设计选题 教育行业 学生信息管理系统在线考试系统课程管理与选课系统教师评价管理系统图书馆管理系统学生成绩查询系统校园论坛作业提交与批改系统学生考勤管理系统教学资源共享平台 企业管理 员工管理系统考勤打卡系统办公用品申请管…...

编程日记 2024/10/21 19:08:09

05 go语言（golang） - 常量和条件语句

常量 在Go语言中&#xff0c;常量是使用 const 关键字定义的&#xff0c;并且一旦被赋值后&#xff0c;它们的值在程序运行期间不能改变。常量可以是字符、字符串、布尔或数值类型。 基本特性 不可修改&#xff1a;一旦一个常量被定义&#xff0c;它的值就不能被更新。编译时…...

编程日记 2024/10/21 19:07:08

【设计模式】深入理解Python中的适配器模式（Adapter Pattern）

深入理解Python中的适配器模式&#xff08;Adapter Pattern&#xff09; 在软件开发中&#xff0c;常常会遇到需要让不兼容的类或接口协同工作的问题。适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;通过提供一个包装器对象&#xff0c;…...

编程日记 2024/10/21 19:05:06

在Ubuntu中通过命令行下载和安装Android Studio最新版本

在Ubuntu中通过命令行下载和安装Android Studio最新版本&#xff0c;有以下几种方法&#xff1a; 方法一&#xff1a;直接下载官方最新版本&#xff08;推荐&#xff09; 1. 安装Java JDK依赖 sudo apt update sudo apt install openjdk-11-jdk -y2. 安装64位系统所需的32位库 …...

编程新知 2026/4/4 6:01:15

Phi-4-mini-reasoning部署教程：SSL证书配置实现https安全访问Web界面

Phi-4-mini-reasoning部署教程&#xff1a;SSL证书配置实现https安全访问Web界面 1. 环境准备 在开始配置SSL证书前&#xff0c;请确保您已经完成以下准备工作&#xff1a; 已部署Phi-4-mini-reasoning模型并正常运行拥有服务器管理员权限已获取有效的域名&#xff08;可以是…...

编程新知 2026/4/4 5:17:00

OpenClaw故障排查大全：Gemma-3-12b-it接口连接失败解决方案

OpenClaw故障排查大全&#xff1a;Gemma-3-12b-it接口连接失败解决方案 1. 问题背景与典型场景 上周我在本地部署Gemma-3-12b-it模型时&#xff0c;遭遇了OpenClaw连接失败的经典问题。明明模型服务已经启动&#xff0c;OpenClaw网关也显示运行正常&#xff0c;但每次发起请求…...

编程新知 2026/4/4 4:16:02

C++编程中new与delete操作符的深度解析

C编程中new与delete操作符的深度解析 在C编程的广阔天地里&#xff0c;内存管理是一个既基础又至关重要的环节。对于每一位C开发者而言&#xff0c;掌握内存的动态分配与释放是构建高效、稳定应用程序的基石。在众多内存管理工具中&#xff0c;new与delete操作符无疑是最为核心…...

编程新知 2026/4/4 4:05:58

技术视域下人的类本质异化复归：返璞归真与转识成智的同构性探索

摘要&#xff1a; 本文立足于技术哲学与认知科学的交叉地带&#xff0c;审视现代技术环境&#xff08;如算法主导的信息流、虚拟社交、自动化决策&#xff09;中人的类本质异化现象。文章深入剖析“返璞归真”作为克服异化、回归本真状态的路径内涵&#xff0c;并揭示其与“转识…...

编程新知 2026/4/4 3:31:47

彻底搞懂ScheduledThreadPoolExecutor

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

编程新知 2026/4/4 3:09:29

OpenClaw配置优化：Qwen3-4B模型参数调优实战

OpenClaw配置优化&#xff1a;Qwen3-4B模型参数调优实战 1. 为什么需要调优Qwen3-4B模型参数 去年夏天&#xff0c;当我第一次在OpenClaw中接入Qwen3-4B模型时&#xff0c;发现同样的提示词在不同任务下表现差异巨大。有时它给出的回答过于保守&#xff0c;像在背诵教科书&am…...

编程新知 2026/4/4 3:03:26

【故障公告】数据库服务器磁盘 MBPS 高造成 :-: 期间全站故障

简介 langchain中提供的chain链组件&#xff0c;能够帮助我门快速的实现各个组件的流水线式的调用&#xff0c;和模型的问答 Chain链的组成 根据查阅的资料&#xff0c;langchain的chain链结构如下&#xff1a; $$Input \rightarrow Prompt \rightarrow Model \rightarrow Outp…...

编程新知 2026/4/4 1:20:27

直接可用4轴插补算法库，STM32的DDA插补联动与梯形加减速算法代码

可以直接使用的4轴插补算法库&#xff0c;不是丢给你一堆gr1b或者写字机或者3d打印的开源代码&#xff0c;本运控库上项目级别的&#xff0c;需要添加在自己的项目中&#xff0c;不支持gm码&#xff0c;只有运动控制核心代码&#xff0c;可以添加在自己项目中的&#xff0c;stm…...

编程新知 2026/4/4 0:54:19

实战指南：用Python的pyttsx3库打造你的专属语音助手

1. 从零认识pyttsx3&#xff1a;你的代码会说话 第一次听到电脑用标准播音腔朗读出我写的文字时&#xff0c;那种感觉就像小时候收到会说话的生日贺卡。pyttsx3这个神奇的Python库&#xff0c;能让任何文本通过声卡变成人声。不同于需要联网的语音合成服务&#xff0c;它完全离…...

编程新知 2026/4/3 23:54:56