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

 

大家好,我是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.mzph.cn/news/34314.shtml

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

相关文章

Jupyter Notebook 500 : Internal Server Error

1. 这个问题的根本原因在于&#xff1a; pygments 包 版本过高。 安装pygments 2.6.1 2.jupyter版本如下 如果某个版本有冲突&#xff0c;卸载了重新安装一下就行。 安装命令&#xff1a; pip install pygments 2.6.1 -i https://pypi.tuna.tsinghua.edu.cn/simple 另外…

界面控件DevExpress WPF Chart组件——拥有超快的数据可视化库!

DevExpress WPF Chart组件拥有超大的可视化数据集&#xff0c;并提供交互式仪表板与高性能WPF图表库。DevExpress Charts提供了全面的2D / 3D图形集合&#xff0c;包括数十个UI定制和数据分析/数据挖掘选项。 PS&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助…

Mysql中插入数据,并返回自增主键的值

创建数据库和表使用 insert into 进行插入数据使用 RETURN_GENERATED_KEYS 进行返回插入的这条数据 具体方法如下&#xff1a; Testvoid addGetPk(){try{Statement stmt conn.createStatement();String sql String.format("insert into t_students values(null,%s,%s,%d…

「已解决」iframe 本地生效 但是在测试环境不生效问题

背景 我有一个表格中一列是个详情&#xff0c;这个详情可被点击&#xff0c;点击后弹出抽屉&#xff0c;抽屉里是后端传给我详情字段的值对应的 url 的 iframe 展示。 问题是&#xff0c;在本地 localhost 下运行&#xff0c;ifame 运行正常&#xff0c;但是部署到测试环境就看…

王道机组难题分析

第四章 指令系统 大端方式&#xff1a;就是高地址存放高位&#xff0c; LSB的意思是&#xff1a;全称为Least Significant Bit&#xff0c;在二进制数中意为最低有效位 MSB的意思是&#xff1a;全称为Most Significant Bit&#xff0c;在二进制数中属于最高有效位 操作数可以理…

JavaWeb-Servlet服务连接器(三)

目录 Response响应对象 1.基本功能 2.重定向 3.路径 4.服务器输出数据到浏览器 Response响应对象 1.基本功能 设置响应行&#xff1a;格式为 HTTP/1.1 200 OK&#xff0c;可以使用 setStatus(int sc) 方法设置状态码为 200 表示成功。 方法名称描述setStatus(int sc)设…

docker下载和案例

文章目录 Docker安装一,根据官方文档安装二,根据我以下方式 Docker配置错误导致漏洞一,CRLF注入漏洞介绍在nginx中该漏洞例子解决方法 目录穿越漏洞介绍解决方法 Docker安装 一,根据官方文档安装 官方文档 二,根据我以下方式 docker安装要求&#xff1a; Docker要求Ce…

用户数据报协议UDP

UDP的格式 载荷存放的是:应用层完整的UDP数据报 报头结构: 源端口号:发出的信息的来源端口目的端口号:信息要到达的目的端口UDP长度:2个字节(16位),即UDP总长度为:2^16bit 2^10bit * 2^6bit 1KB * 64 64KB.所以一个UDP的最大长度为64KBUDP校验和:网络的传输并非稳定传输,…

【leetcode】前缀和

内容摘抄自&#xff1a; 小而美的算法技巧&#xff1a;前缀和数组 | labuladong 的算法小抄 一维数组的前缀和 看这个 preSum 数组&#xff0c;若想求索引区间 [1, 4] 内的所有元素之和&#xff0c; 就可以通过 preSum[5] - preSum[1] 得出。 class NumArray {private:// 前缀…

wordpress数据表中标签和分类如何区分?

wordpress中标签和分类是什么关系怎么区分&#xff1f;最后有一个群的网友告诉了我文章ID和标签ID的关系是放在了wp_term_relationships表中&#xff0c;然后我百度了下这个表的结构和相关介绍&#xff0c;发现果然如此&#xff0c;先把文章保存起来&#xff1a; wp_term_rela…

消息中间件 Asio (C++)

折腾了一上午&#xff0c;看到这个结果的时候泪目了兄弟闷&#xff0c;讲真。我的asio客户端成功收到服务端发来的消息了。虽然这确实是极其智障又简单的入门哈哈 下载独立版本 asio网络通信库新建cmake工程&#xff0c;CMakeLists.txt加载asioasio最简单的服务端和客户端代码…

【elasticSearch系】3.完整搭建详尽版elk

话不多说,我们先看下经典的elk 是由哪些组件搭建组合起来的 elasticSearch和kibana搭建 可以查看之前我搭建elasticsearch和kibana 的这篇文章 logstash搭建 为了和之前我搭建elasticsearch和kibana版本保持一致,这里我们还是选择7.17.3 下载地址 点击下载,这里为了方…

wangEditor5实现@评论功能

需求描述&#xff1a;在输入框输入后显示用户列表&#xff0c;实现人功能 当前环境&#xff1a;vue3viteelementPluswangEditor5 需要插件&#xff1a;wangeditor/plugin-mention 安装插件&#xff1a;npm i wangeditor/plugin-mention 输入框组件分两部分&#xff1a;1. wa…

谈谈对Spring MVC的理解

问题分析&#xff1a; SpringMVC 是一种基于 Java 语言开发&#xff0c;实现了 Web MVC 设计模式&#xff0c;请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想&#xff0c;通过把 Model&#xff0c;View&#xff0c;Controller 分离&#xff0c;将 Web 层…

基于vue3+webpack5+qiankun实现微前端

一 主应用改造&#xff08;又称基座改造&#xff09; 1 在主应用中安装qiankun(npm i qiankun -S) 2 在src下新建micro-app.js文件&#xff0c;用于存放所有子应用。 const microApps [// 当匹配到activeRule 的时候&#xff0c;请求获取entry资源&#xff0c;渲染到containe…

软件测试基础篇——MySQL

MySQL 1、数据库技术概述 数据库database&#xff1a;存放和管理各种数据的仓库&#xff0c;操作的对象主要是【数据data】&#xff0c;科学的组织和存储数据&#xff0c;高效的获取和处理数据SQL&#xff1a;结构化查询语言&#xff0c;专为**关系型数据库而建立的操作语言&…

JavaScript类

JavaScript 类(class) 类是用于创建对象的模板。 我们使用 class 关键字来创建一个类&#xff0c;类体在一对大括号 {} 中&#xff0c;我们可以在大括号 {} 中定义类成员的位置&#xff0c;如方法或构造函数。 每个类中包含了一个特殊的方法 constructor()&#xff0c;它是类…

vue3项目中引入dialog插件,支持最大最小化、还原、拖拽

效果图&#xff1a; 上图是layui-vue组件库中的layer插件&#xff0c;我的项目使用的是element-plus组件库&#xff0c;在用不上layui组件库的情况下&#xff0c;就单独引入layui/layer-vue这个弹层插件就可以了 npm地址&#xff1a;layui/layer-vue - npm layui-vue组件库地址…

UnrealEngine - 网络同步之连接篇

1 连接过程 - 握手 传统的 C/S 架构下&#xff0c;Client 和 Server 通常会建立一条抽象的 Connection&#xff0c;用来进行两端的通信。 UE 的官方文档中提供了 Client 连接到 Server 的示例 &#xff0c;简单来说分为如下几步&#xff1a; 打包构建好 Client 和 Server 进程…

11-数据结构-栈和队列的应用(C语言)

栈和队列的应用 目录 栈和队列的应用 一、括号匹配&#xff08;栈&#xff09; 二、表达式的各种转换 (1)中缀转后缀(手工) (2)后缀转中缀表达式(手工) (3)中缀转后缀(栈) (4)中缀转后缀&#xff08;树&#xff09; (5)后缀表达式求值 (6)中缀表达式求值&#xff08;栈…