【积水成渊】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元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。这是一个例子:

css 复制代码
::selection {
  background-color: yellow;
  color: red;
}

::first-letter

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

css 复制代码
p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line

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

css 复制代码
p::first-line {
  font-weight: bold;
  text-decoration: underline;
}

::marker

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

css 复制代码
li::marker {
  color: blue;
  font-weight: bold;
}

::placeholder

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

css 复制代码
input::placeholder {
  color: #999;
  font-style: italic;
}

::cue

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

css 复制代码
video::cue {
  color: white;
  background-color: black;
}

::grammar-error

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

css 复制代码
p::grammar-error {
  text-decoration: line-through;
  color: red;
}

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

::backdrop

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

css 复制代码
video::backdrop {
  background-color: gray;
}

::target-text

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

css 复制代码
::target-text {
  background-color: rebeccapurple;
  color: white;
}
相关推荐
传人once1 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
库拉镜像AI牛牛1 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔1 小时前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师1 小时前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端
律宏阔2 小时前
Dart 3 Record:解决 Future.wait 异构返回值的类型问题
前端·flutter
Seraphina362 小时前
DVWA(XSS Reflected/Stored High,CSRF Low)
前端·xss·csrf
默_笙3 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
程序员老赵3 小时前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨3 小时前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
Dovis(誓平步青云)3 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑