【积水成渊】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;
}
相关推荐
IT_陈寒1 分钟前
SpringBoot自动配置失效时我差点把电脑扔了
前端·人工智能·后端
何何____16 分钟前
web方向js考核题解
开发语言·前端·javascript
风骏时光牛马17 分钟前
AI面试复盘:沉淀经验,找准求职短板
前端
liangshanbo121517 分钟前
面试题终极整理:手写 Promise.all / Promise.allSettled
前端·javascript·promise
心易行者17 分钟前
用HTML在线运行搭后台管理系统:5个核心模块+0服务器,3天跑通完整业务
大数据·前端·网络·人工智能·python
单线程1213828 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
神奇的程序员37 分钟前
Apple Watch S12,送一台
前端
moonsims2 小时前
Voliro 无人机-Aerial Mobile Robot(空中移动机器人):把无人机从“飞过去拍摄”,升级成“飞过去并与目标物理接触、测量甚至操作”
前端·人工智能·安全·无人机·量子计算
晴天163 小时前
Chrome 控制台(DevTools)竟是用 HTML 写的?-Day41
前端·chrome·html
变与不变8063 小时前
Debug 调试与排错规范
前端·javascript