当前位置: 首页 > news >正文

【积水成渊】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.lryc.cn/news/128238.html

相关文章:

  • 【002】学习笔记之typescript的【任意类型】
  • 题目:2574.左右元素和的差值
  • 成集云 | 用友U8采购请购单同步钉钉 | 解决方案
  • 爬虫的代理IP池写哪里了?
  • CSS变形与动画(三):animation帧动画详解(用法 + 四个例子)
  • Ubuntu发布java版本
  • Java反射机制是什么?
  • legacy-peer-deps的作用
  • 卷积操作后特征图尺寸,感受野,参数量的计算
  • C/C++ 注意点补充
  • Python实时监控键盘的输入并打印出来
  • LaWGPT零基础部署win10+anaconda
  • 糖尿病视网膜病变,黄斑病变,年龄相关检测研究(Matlab代码)
  • 管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——选言——相容选言——或——第一节 推结论
  • MySQL数据库——图形化界面工具(DataGrip),SQL(2)-DML(插入、修改和删除数据)
  • 【Git】(五)切换分支
  • LVS集群和nginx负载均衡
  • mysql 03.查询(重点)
  • arcpy读取csv、txt文件
  • Leetcode32 最长有效括号
  • 【Android】Dagger和Hilt新手快速入门
  • phpstorm 推荐插件
  • 在进行自动化测试,遇到验证码的问题,怎么办?
  • C语言刷题训练DAY.6
  • Java进阶篇--数据结构
  • 使用Facebook Pixel 埋点
  • 《Go 语言第一课》课程学习笔记(七)
  • Docker Nginx 运行前端项目
  • 企业权限管理(十)-用户详情
  • Windows 11 家庭中文版找不到组策略文件gpedit.msc