【积水成渊】9 个CSS 伪元素

news2025/1/16 1:32:23

 

大家好,我是csdn的博主:lqj_本人

这是我的个人博客主页:

lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

哔哩哔哩欢迎关注:

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

 

目录

::selection

::first-letter

::first-line

::marker

::placeholder

::cue

::grammar-error

::backdrop

::target-text


::selection

伪::selection元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。这是一个例子:

::selection {
  background-color: yellow;
  color: red;
}

::first-letter

伪::first-letter元素允许您设置块级元素首字母的样式。当您想将特殊格式应用于段落或标题的初始字符时,它会派上用场。这是一个例子:

p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line

与 类似::first-letter,::first-line伪元素以文本或块级元素的第一行为目标。您可以使用此伪元素将特定样式应用于段落或标题的起始行。这是一个例子:

p::first-line {
  font-weight: bold;
  text-decoration: underline;
}

::marker

伪::marker元素以列表项的标记为目标,例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素,您可以自定义标记的外观。这是一个例子:

li::marker {
  color: blue;
  font-weight: bold;
}

::placeholder

伪元素::placeholder允许您在输入字段和文本区域中设置占位符文本的样式。通过将自定义样式应用到占位符,您可以增强用户体验并使其与您的整体设计保持一致。这是一个例子:

input::placeholder {
  color: #999;
  font-style: italic;
}

::cue

伪元素以or元素::cue的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素,您可以将样式专门应用于提示文本。这是一个例子:<audio><video>

video::cue {
  color: white;
  background-color: black;
}

::grammar-error

和伪元素允许您分别设置标记为语法或拼写错误的文本部分的样式::grammar-error。::spelling-error当内容中存在错误时,这些伪元素可用于向用户提供视觉提示。这是一个例子:

p::grammar-error {
  text-decoration: line-through;
  color: red;
}

p::spelling-error {
  text-decoration: underline;
  color: blue;
}

::backdrop

伪::backdrop元素与全屏 api 结合使用,以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式。这是一个例子:

video::backdrop {
  background-color: gray;
}

::target-text

如果浏览器支持文本片段,则CSS::target-text伪元素表示已滚动到的文本。它允许作者选择如何突出显示该部分文本。这是一个例子:

::target-text {
  background-color: rebeccapurple;
  color: white;
}

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

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

相关文章

预测知识 | 预测技术流程及模型评价

预测知识 | 预测技术流程及模型评价 目录 预测知识 | 预测技术流程及模型评价技术流程模型评价参考资料 技术流程 1&#xff09;模型训练阶段&#xff1a;预测因素和结局&#xff0c;再加上预测模型进行模型拟合&#xff1b; 2&#xff09;预测阶段&#xff1a;将预测因素代入拟…

如何自学(黑客)网络安全

前言&#xff1a; 想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“…

前端一键升级 package.json里面的依赖包管理

升级需谨慎 前端一键升级 package.json里面的依赖包管理 安装&#xff1a;npm-check-updates npm i npm-check-updates -g缩写 ncu 在项目根目录里面执行 ncu 如图&#xff1a;

日撸java_day61-62

决策树 package machineLearning.decisiontree;import weka.core.Instance; import weka.core.Instances;import java.io.FileReader; import java.util.Arrays;/*** ClassName: ID3* Package: machineLearning.decisiontree* Description: The ID3 decision tree inductive …

企业服务器数据库遭到malox勒索病毒攻击后如何解决,勒索病毒解密

网络技术的发展不仅为企业带来了更高的效率&#xff0c;还为企业带来信息安全威胁&#xff0c;其中较为常见的就是勒索病毒攻击。近期&#xff0c;我们公司收到很多企业的求助&#xff0c;企业的服务器数据库遭到了malox勒索病毒攻击&#xff0c;导致系统内部的许多重要数据被加…

YOLOv5基础知识入门(5)— 损失函数(IoU、GIoU、DIoU、CIoU和EIoU)

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。使用YOLOv5训练模型阶段&#xff0c;需要用到损失函数。损失函数是用来衡量模型预测值和真实值不一样的程度&#xff0c;极大程度上决定了模型的性能。本节就给大家介绍IoU系列损失函数&#xff0c;希望大家学习之后能够有…

分布式 - 消息队列Kafka:Kafka消费者的分区分配策略

文章目录 1. 环境准备2. range 范围分区策略介绍3. round-robin 轮询分区策略4. sticky 粘性分区策略5. 自定义分区分配策略 1. 环境准备 创建主题 test 有5个分区&#xff0c;准备 3 个消费者并进行消费&#xff0c;观察消费分配情况。然后再停止其中一个消费者&#xff0c;再…

opencv实战项目 手势识别-手势控制键盘

手势识别是一种人机交互技术&#xff0c;通过识别人的手势动作&#xff0c;从而实现对计算机、智能手机、智能电视等设备的操作和控制。 1. opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪并返回位置信息&#xff08;封装调用&am…

Java医院信息化HIS管理系统源码

HIS模板分为两种&#xff1a;病历模板和报表模板。模板管理是运营管理的核心组成部分&#xff0c;是基层卫生健康云中各医疗机构定制电子病历和报表的地方&#xff0c;各医疗机构可根据自身特点特色定制电子病历和报表&#xff0c;制作的电子病历及报表可直接在业务系统中使用。…

全国各城市-货物进出口总额和利用外资-外商直接投资额实际使用额(1999-2020年)

最新数据显示&#xff0c;全国各城市外商直接投资额实际使用额在过去一年中呈现了稳步增长的趋势。这一数据为研究者提供了对中国外商投资活动的全面了解&#xff0c;并对未来投资趋势和政策制定提供了重要参考。 首先&#xff0c;这一数据反映了中国各城市作为外商投资的热门目…

SSL握手协议相关概念

下图为握手协议的流程图&#xff0c;具体的解释参考博客&#xff1a; 【下】安全HTTPS-全面详解对称加密&#xff0c;非对称加密&#xff0c;数字签名&#xff0c;数字证书和HTTPS_tenfyguo的博客-CSDN博客 下面梳理一下SSL协议中的一些细节。首先是相关名词&#xff1a;证书、…

【jvm】类加载子系统

目录 一、图二、类加载器作用三、类加载器角色四、类的加载过程4.1 加载4.1.1 说明4.1.2 加载.class文件的方式 4.2 链接4.2.1 验证(verify [ˈverɪfaɪ])4.2.2 准备(prepare)4.2.3 解析(resolve) 4.3 初始化4.3.1 说明4.3.2 图示14.3.3 图示24.3.3 图示3 一、图 二、类加载器…

预测知识 | 神经网络、机器学习、深度学习

预测知识 | 预测技术流程及模型评价 目录 预测知识 | 预测技术流程及模型评价神经网络机器学习深度学习参考资料 神经网络 神经网络&#xff08;neural network&#xff09;是机器学习的一个重要分支&#xff0c;也是深度学习的核心算法。神经网络的名字和结构&#xff0c;源自…

整理mongodb文档:find方法查询数据

个人博客 整理mongodb文档:find方法查询数据 求关注&#xff0c;求批评&#xff0c;求指出&#xff0c;如果哪儿不清晰&#xff0c;请指出来&#xff0c;谢谢 文章概叙 如题&#xff0c;本文讲的是如何用find查询数据&#xff0c;如何在数组、字段、对象中查询&#xff0c;以…

redis学习笔记(八)

文章目录 redis的配置redis的核心配置选项Redis的使用 redis的配置 cat /etc/redis/redis.confredis 安装成功以后,window下的配置文件保存在软件 安装目录下,如果是mac或者linux,则默认安装/etc/redis/redis.conf redis的核心配置选项 绑定ip&#xff1a;访问白名单&#x…

关系型数据库MySQL及其优化

写在前面 本文看下MySQL的基础内容以及常见的优化方式。 1&#xff1a;MySQL基础内容 1.1&#xff1a;什么是关系型数据库 以二维的数据格式来存储数据的数据库叫做关系型数据库&#xff0c;其中关系包括一对一&#xff0c;一对多&#xff0c;多对多&#xff0c;都通过二位…

qt QPalette的原理与使用

QPalette类用于控制控件的风格&#xff0c;即任意一个地方的绘制方式。每个控件或者说qwidget对象内部都有一个QPalette对象。 在paintEvent(QPaintEvent *event)函数中&#xff0c;其实就是调用该控件的QPalette内容来进行绘制的了。 例如&#xff1a; QStyleOptionTab opt…

强化学习算法

强化学习算法 游戏模型如下&#xff1a; 策略网络输入状态s&#xff0c;输出动作a的概率分布如下&#xff1a; π ( a ∣ s ) \pi(a|s) π(a∣s) 多次训练轨迹如下 r表示回报横轴为T, 1个回合的步骤数纵轴为N, 回合数&#xff0c;1行代表1条轨迹&#xff0c;符合概率分布…

DatawhaleAI夏令营第三期机器学习用户新增预测挑战赛baseline新手教程

本教程会带领大家项目制学习&#xff0c;由浅入深&#xff0c;逐渐进阶。从竞赛通用流程与跑通最简的Baseline&#xff0c;到深入各个竞赛环节&#xff0c;精读Baseline与进阶实践技巧的学习。 千里之行&#xff0c;始于足下&#xff0c;从这里&#xff0c;开启你的 AI 学习之旅…

wifi列表消失 后总结

故障现象&#xff1a; 管理源身份打开cmd &#xff0c;然后重启网络服务 Fn 加信号塔 开启二者为自动&#xff1a; 刷新网络&#xff1a; Fn 加信号塔 重启的时间可以放长一些 半个小时左右