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

news/2024/12/22 9:17:50/

 

大家好,我是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.ppmy.cn/news/1028249.html

相关文章

Flowable-边界事件-补偿边界事件

目录 定义图形标记XML内容使用示例演示demo 定义 补偿边界事件可以为所依附的节点附加补偿处理器&#xff0c;通过关联连接到补偿处理器&#xff08;compensation handler&#xff09;。补偿边界事件会在流程活动完成后根据情况&#xff08;事务取消或者补偿中间事件触发&…

关于Neo4j的使用及其基本命令

关于Neo4j的使用 文章目录 关于Neo4j的使用1、启动方式2、创建新节点&#xff0c;节点内有属性3、创建关系4、查询节点5、查询关系6、删除两个节点的关系7、删除节点8、删除某个标签的全部关系9、某个节点添加属性10、删除节点某个属性 1、启动方式 进入bin目录&#xff1a; …

SLF4J日志绑定原理分析

前言 最近做项目&#xff0c;实际上也知道日志冲突的事&#xff0c;不过涉及MDC NDC数据传递&#xff0c;当日志框架冲突后&#xff0c;MDC和NDC就失效了&#xff0c;这里就涉及slf4j-api的MDC的绑定的过程&#xff0c;顺便分析了日志冲突实际生效的原因&#xff0c;理解SLF4J…

【网络编程】高级IO

文章目录 一、五种IO模型的基本理念二、IO重要概念 1.同步通信与异步通信的对比2.阻塞VS非阻塞三丶非阻塞IO的代码演示四丶IO多路转接select总结 一、五种IO模型的基本理念 首先IO就是 等 数据拷贝&#xff0c;还记得我们之前实现服务器用的read/recv接口的&#xff0c;当时我…

React源码解析18(3)------ beginWork的工作流程【mount】

摘要 OK&#xff0c;经过上一篇文章。我们调用了&#xff1a; const root document.querySelector(#root); ReactDOM.createRoot(root)生成了FilberRootNode和HostRootFilber。 并且二者之间的对应关系也已经确定。 而下一步我们就需要调用render方法来讲react元素挂载在ro…

u盘为什么提示格式化?u盘提示格式化怎么办

U盘是一种便携式存储设备&#xff0c;在使用U盘的过程中&#xff0c;有时候会出现提示需要格式化的情况。这种情况通常会让人担心自己重要的数据是否会丢失。那么&#xff0c;U盘为什么提示格式化&#xff1f;U盘提示格式化怎么办&#xff1f;在本文中&#xff0c;我们将探讨U盘…

MySQL数据库基础语法

一&#xff0c;数据库操作 数据库中不区分大小写&#xff01;&#xff01;&#xff01; 1.1 显示数据库 show databases ; 如图&#xff1a; 1.2 创建数据库 create database [ if not exists ]数据库名 ; 如图&#xff1a; 1.3 使用数据库 use 数据库名 &#xff1b; 如图&a…

linux 下安装部署flask项目

FlaskDemo 命名为test.py # codingutf-8 from flask import Flaskapp Flask(__name__)app.route("/") def index():return "test"if __name__ __main__:app.debug True# 这里host一定要写0.0.0.0 写127.0.0.1的无法访问 ——_——app.run(host"0.…